Sự kỳ diệu của Background linear-gradient & Background radial-gradient.

Background là thành phần trong css mà gần như ai thiết kế web cũng biết
Nói đến background là nghĩ ngay đến :
- Cách đơn giản nhất Background: #fff;
- Hoặc background:#ffcc00 url(link_img) repeat-x 0 50%; [#color] [link_img] [tính lặp] [vị trí]
Nếu bạn chưa rõ về kiểu viết thứ 2 ở trên thì xem lại bài về background trong phần tổng hợp css.

Tại bài này Tôi sẽ giới thiệu một số cách viết background phức tạp hơn. Đó là sự chuyển màu và các hướng chuyển màu mà trong css.
Cho tới thời điểm hiện nay, vẫn chưa có sự thống nhất chuẩn trong cách viết này, vì cách viết giống nhau không hẳn sẽ hiển thị giống nhau ở trình duyệt khác nhau, cách viết khác nhau có thể cho hiển thị như nhau dù cùng 1 trình duyệt. Tôi từng băn khoăn không biết mình nên viết theo kiểu nào để hiển thị được đúng nhất cho nhiều trình duyệt nhất và tôi đã giải quyết vấn đề này như sau, mời các bạn theo dõi.

Nói đến sự chuyển màu bạn sẽ thấy hiện nay có những loại chuyển màu sau:
- Linear Gradient : dạng đường thẳng.
- Ridial Gradient: dạng tròn.
Background linear-gradient, Background radial-gradient

Đối với loại hòa trộn màu theo dạng thẳng Linear Gradient
Phương màu sẽ được tạo ra từ điểm màu đầu tiên đến điểm màu cuối cùng, phương màu đi qua mổi điểm ảnh thì các điểm ảnh vuông góc với phương màu sẽ thay đổi một giá trị so với màu kế bên.
Cú pháp cơ bản:

Background: -[kiểu trình duyệt]-[tính lặp]-linear-gradient ([phương hướng màu], [màu 1] [vị trí màu 1], [màu 2] [vị trí màu 2], [màu 3] [vị trí màu 3], [màu n] [vị trí màu n]);

- Kiểu trình duyệt: o, moz, webkit, ms.

- Tính lặp:
Giá trị: repeating có thể có hoặc không.

- Phương hướng màu gồm 2 loại:

+ Phương hướng cơ bản:
Có kiểu viết đầy đủ là [x_bắt_đầu y_bắt_đầu], [x_kết_thúc y_kết_thúc]
trong đó X là LEFT, RIGHT. Y là TOP, BOTTOM
ví dụ : LEFT TOP, RIGHT BOTTOM
Tuy nhiên nếu là phướng thẳng đứng (90deg) hoặc ngang (0deg) thì chỉ cần viết y_kết_thúc

+ Phương hướng tùy chọn: viết cụ thể số góc mong muốn: ví dụ: 15deg, 30deg, 40deg, 50deg,...

- Màu:
Viết thieo kiển HEX (ví dụ: #ffcc00) hoặc RGB (ví dụ: rgb(0,100,255))

- Vị trí màu: giá trị từ điểm đầu tiên (0%) đến điểm cuối cùng (100%)

Tôi thấy cách viết đầy đủ nhất, tương thích với nhiều trình duyệt thì nên viết như sau:

background: #0B751D; /*phòng trường hợp xấu nhất*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0B751D, endColorstr=#1B8025);/* Internet Explorer 5.5 - 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#0B751D, endColorstr=#1B8025)"; /* For Internet Explorer 8 */
background-image: -ms-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* Internet exlorer 9+ */
background-image: linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /*chuẩn chung*/
background-image: -o-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* opera */
background-image: -moz-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* mozilla firefox */
background-image: -webkit-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* Google Chrome,...*/
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #0B751D), color-stop(0.52, #EBEBEB), color-stop(1, #1B8025));

Kiểu hòa trộn màu dạng tròn Ridial Gradient
Background linear-gradient, Background radial-gradient

Cú pháp chung:

background-image: -[Kiểu trình duyệt]-[tính lặp]-radial-gradient([vị trí tâm], [hình dạng] [phạm vi], [màu 1] [vị trí màu 1], [màu 2] [vị trí màu 2], [màu 3] [vị trí màu 3], [màu n] [vị trí màu n])

- Kiểu trình duyệt o, moz, webkit, ms

- Tính lặp
Giá trị: repeating có thể có hoặc không.

- Vị trí tâmVị trí tâm màu thứ 1 so với khung hình của DIV. Cú pháp [X] [Y]. Có 2 loại vị trí.
Vị trí cơ bản: Giá trị X là: LEFT, CENTER, RIGHT. Giá trị Y là: TOP, CENTER, BOTTOM.
Vị trí tùy chọn: Đơn vị là PX, EM, %. Ví dụ: 20px, 2em, 50%.
Do đó có thể viết: 20px center hoặc 50% 30% hoặc 50px 100px.

- Hình dạng
Chỉ có 2 giá trị: ellipse hoặc circle

- Phạm vi
Hiện nay có 6 loại giá trị mặc định sau:
closest side (bên gần nhất)
closest corner (góc gần nhất)
farthest side (phía xa nhất)
farthest corner (góc xa nhất)
contain (chứa)
cover (che)

- Màu:
Có 2 loại hệ màu: Màu loại RGR-A (ví dụ rgba(184, 138, 79, 0.4)) hoặc HEX (ví dụ: #ccdd00)
- Vị trí màu:
là vị trí từ tâm màu thứ nhất đến màu thứ n. Đơn vị là PX, EM, %

Ví dụ hoàn chỉnh:

background-color:rgba(255, 255, 255, 0.6);
background-image: -moz-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -webkit-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -o-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -ms-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%)

Như vậy, tôi đã giới thiệu các bạn 2 kiểu trộn màu cơ bản nhất. Kỹ thuật này vẫn đang được phát triển nên các bạn có thể tham khảo các tài liệu phân tích về vấn đề này tại đây:

Bạn xem thêm vài ví dụ :...

thao trinh

http://web.bendoi.vn/2013/08/Background-linear-gradient-Background-radial-gradient.html