CSS3 - Gradients

Gradients là gì?

Gradients hiển thị sự kết hợp của hai hoặc nhiều màu như hình dưới đây -

Các loại gradient

Gradients tuyến tính (xuống / lên / trái / phải / chéo)
Radial Gradients

Gradient tuyến tính

Gradient tuyến tính được sử dụng để sắp xếp hai hoặc nhiều màu theo các định dạng tuyến tính như từ trên xuống dưới.

Từ trên xuống dưới

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Trái sang phải

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Đường chéo

Đường chéo bắt đầu ở trên cùng bên trái và nút bên phải.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Nhiều màu

<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>

Nó sẽ tạo ra kết quả sau:

CSS3 Radial Gradients

Gradient xuyên tâm xuất hiện ở trung tâm.

<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>

Nó sẽ tạo ra kết quả sau:

CSS3 Lặp lại Gradients Radial

<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>

Nó sẽ tạo ra kết quả sau: