Ngôn ngữ CSS - CSS3 Gradients
Bài trước
Bài sau

Gradient là gì?

Gradient là sự kết hợp hai hoặc nhiều màu

Các kiểu Gradient

CSS có hai loại Gradients

  • Linear Gradients(down/up/left/right/diagonally)
  • Radial Gradients

Linear Gradients

Để tạo một linear gradient, bạn phải định nghĩa ít nhất hai điểm dừng màu. Điểm dừng màu là các màu bạn muốn hiển thị chuyển tiếp xuyên suốt  giữa các màu. Bạn cũng có thể đặt một điểm bắt đầu và một hướng (hoặc một góc) cùng với hiệu ứng gradient.

Cú pháp:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient  - Từ trên xuống dưới (đây là giá trị mặc định)
Ví dụ: Cho thấy một linear gradient bắt đầu ở phía trên. Điểm bắt đầu màu đỏ, chuyển sang màu vàng:

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

Xem ví dụ

Linear Gradient - Trái sang Phải

Ví dụ: Cho thấy một linear gradient bắt đầu bên trái. Điểm bắt đầu màu đỏ, chuyển sang màu vàng:

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
}

Xem ví dụ

Linear Gradient - Diagonal
Diagonal bắt phía trên bên trái đến phía dưới bên phải

Ví dụ sau cho thấy một linear gradient bắt đầu ở trên cùng bên trái sang phía dưới cùng, bên phải. Nó bắt đầu màu đỏ chuyển sang màu vàng:

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */
}

Xem ví dụ

Nhiều Màu

Ví dụ:

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>
   <body>
      <div id="grad2"></div>
   </body>
</html>

Xem ví dụ

CSS3 Radial Gradients
sử dụng hàm radial-gradient() để tạo radial gradient

CSS3 Radial Gradients màu xuất hiện tại trung tâm

Ví dụ:

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

Xem ví dụ

CSS3 Repeat Radial Gradients

sử dụng hàm repeating-linear-gradient() để lặp lại linear gradient .

Ví dụ:

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

Xem ví dụ

Trình duyệt hỗ trợ

Thuộc tính Chrome IE Firefox Safari Opera
linear-gradient 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.1 -o-
radial-gradient 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.6 -o-
repeating-linear-gradient 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.1 -o-
repeating-radial-gradient 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.6 -o-


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×