[CSS] Gradients trong CSS3

Gradients là một thành phần rất hữu ích, được hỗ trợ trong CSS3.
Trước đây khi muốn có một background đổ màu gradient (chuyển từ màu này sang màu kia trên 1 thành phần, chẳng hạn nút ấn có hiệu ứng nền gradient để trông như là nổi lên trên...) thường thì bạn phải vẽ 1 cái ảnh có đổ màu như ý rồi đặt cho nó làm nền!!?
Bây giờ CSS3 đã hỗ trợ những tính năng này giúp bạn có thể tạo những background cực kỳ ảo diệu   :D

Các thuộc tính và trình duyệt hỗ trợ

Property
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

I. Linear Gradients 

Linear Gradient - Từ trên xuống dưới (đây là giá trị mặc định)

#grad
{
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, blue); /* Standard syntax */
}

Linear Gradient - Từ trái sang phải

.grad
{
    background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , blue); /* Standard syntax */
}

Linear Gradient - Theo đường chéo

#grad
{
    background: -webkit-linear-gradient(left top, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red, blue); /* Standard syntax */
}

Linear Gradient - Dùng góc tùy chỉnh

#grad
{
    background: -webkit-linear-gradient(160deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(160deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(160deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(160deg, red, blue); /* Standard syntax */
}

Linear Gradient - Nhiều màu

#grad
{
 /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* Standard syntax */
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Linear Gradient - Dùng màu trong suốt

#grad
{
 background: -webkit-linear-gradient(left,rgba(255,0,0,0.3),rgba(255,0,0,1)); /*Safari 5.1-6*/
 background: -o-linear-gradient(right,rgba(255,0,0,0.3),rgba(255,0,0,1)); /*Opera 11.1-12*/
 background: -moz-linear-gradient(right,rgba(255,0,0,0.3),rgba(255,0,0,1)); /*Fx 3.6-15*/
 background: linear-gradient(to right, rgba(255,0,0,0.3), rgba(255,0,0,1)); /*Standard*/
}

Linear Gradient - Lặp lại

#grad
{
/* Safari 5.1 to 6.0 */
 background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
 background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
 background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
 background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

II. Radial Gradients

Radial Gradient - Cú pháp chính

background: radial-gradient(center, shape size, start-color, ..., last-color);

Ví dụ

#grad
{
 background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
 background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
 background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
 background: radial-gradient(red, green, blue); /* Standard syntax */
}

"shape" ở đây là quy định hình dạng cho radial có thể là: "ellipse" hoặc "circle"

#grad
{
 background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
 background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
 background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
 background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

III. Tạo chữ với hiệu ứng Gradient

Tạo chữ được đổ màu Gradient

Gradient Text

h1.grad
{
 /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* Standard syntax */
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
}

Bạn có thể vào trang này để tự tạo cho mình những mẫu gradient nhanh chóng, trực quan.

Enjoy!!