Chuyển sắc gradient với CSS

Trước kia có lẽ mọi thứ màu nền bạn đều cắt từ PS, nhưng trong thiết kế web hiện đại việc tối ưu thiết kế là quan trọng những gì có thể không cần dùng tới hình ảnh thì bạn nên làm, điều này không những làm web của bạn nhẹ, giảm được băng thông mà code của bạn cũng thân thiện hơn.

Trong bài sử dụng CSS3 ngày nay tôi có giới thiệu một số thuộc tính CSS3 đang được sử dụng rộng dãi trong thiết kế web hiện đại ngày nay, trong bài này tôi xin giới thiệu về gradient chuyển sắc với CSS. Chỉ với vài thuộc tính CSS ta có thể tạo được màu nền chuyển sắc thay vì phải cắt một cái background trong Photoshop, đây là một thuộc tính rất hay của CSS và bạn có thể áp dụng được trên rất nhiều trình duyệt khác nhau.

code

background:#006070;
background: linear-gradient(top, #648080 0%, #006070 100%);
background:-o-linear-gradient(top, #648080, #006070);
background:-moz-linear-gradient(top, #648080, #006070);
background:-webkit-gradient(linear, left top, left bottom, from(#648080), to(#006070));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr ='#648080', endColorstr ='#006070');
background: -ms-linear-gradient(top, #648080, #006070);

Mô tả

Dòng 1:  là mầu nền thuần bạn sẽ để đầu tiên trong trường hợp trình duyệt người dùng không hỗ trợ gradient thì chí ít nó cũng có được màu nền theo ý bạn

Dòng 2:  dành cho trình duyệt nào không có vendor prefix theo chuẩn code của W3C

Dòng 3: được sử dụng cho trình duyệt opera từ phiên bản 11 trở lên, -o-linear-gradient có 3 tham số với tham số đầu tiên là hướng chuyển sắc bạn có thể thay bằng "bottom", "left", hoặc "right", hai tham số còn lại là mã mầu bắt đầu và màu kết thúc, bạn cũng có thể thêm các tham số màu và cả tỉ lệ phần trăm vị trí nữa cho thêm sặc sỡ, mã mầu bạn cũng có thể dùng chế độ màu rgab trong CSS3

Dòng 4:  sử dụng cho trình duyệt firefox từ phiên bản 3.6, các tham số tương tự như trên

Dòng 5:  sử dụng cho trình duyệt Chrome và Safari. Tham số đầu tiên linear là kiểu chuyến sắc, tham số thứ 2 ngĩa là mầu đầu tiên được chuyển từ bên trái và phía trên, tham số thứ hai nghĩa là mầu kết thúc được chuyển từ bên trái và phía dưới, bạn có thể thay "left" bằng "right" một trong hai tham số 2 và 3 để có được chuyển sắc theo một góc 45 độ, tham số thứ 4 và thứ 5 là mã mầu bắt đầu và kết thúc, để thêm màu vào các khoảng ở giữa chuyển sắc bạn dùng thêm các tham số color-stop("% vị trí ","màu")

Dòng 6:  sử dụng cho trình duyệt Internet Explorer của Microsoft nó có thể làm việc trên cả phiên bản IE6 thậm chí cả IE5 tuy nhiên lại không làm việc trên IE9, trong bài viết sau tôi sẽ giới thiệu giải pháp gradient cho IE9

Dòng 7:  sử dụng cho IE10 của Microsoft

Kết luận

Bạn có thể thấy mọi thứ thật đơn giản với CSS, và có lẽ bạn chỉ cần cắt background với Photoshop khi nào bạn cần những mẫu partten họa tiết hoặc những background cho title bóng bẩy kiểu web 2.0, tuy nhiên màu chuyển sắc đơn giản cũng tạo nên hiệu quả đặc biệt cho trang web, có cả tool luốn nhé