CSS Gradients

0
27
  • CSS gradient cho phép bạn thay đổi giữa hai hoặc nhiều màu được chỉ định.

CSS xác định hai loại gradient:

  • Linear Gradients (đi xuống / lên / trái / phải / theo đường chéo)
  • Radial Gradients (dựa vào vị trí trung tâm)

CSS Linear Gradients.

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

Hướng – Từ trên xuống dưới (đây là mặc định).

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

Ví dụ:

Cú pháp:

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}

Hướng – Trái sang phải.

  • Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu vàng:

Ví dụ:

Cú pháp:

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}

Hướng – Đường chéo.

  • Bạn có thể tạo một gradient theo đường chéo bằng cách chỉ định cả vị trí bắt đầu ngang và dọc.
  • Ví dụ sau đây cho thấy một linear gradient bắt đầu ở trên cùng bên trái (và đi xuống dưới cùng bên phải). Nó bắt đầu màu đỏ, chuyển sang màu vàng:

Ví dụ

Cú pháp:

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}

Sử dụng góc.

  • Nếu bạn muốn chỉnh hướng của gradient, bạn có thể xác định một góc, thay vì các hướng được xác định trước (xuống dưới, lên trên, sang phải, sang trái, dưới cùng bên phải, v.v.). Giá trị 0deg tương đương với “to top”. Giá trị 90deg tương đương với “to right”. Giá trị 180deg tương đương với “to bottom”.

Ví dụ:

Cú pháp:

#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}

Sử dụng nhiều điểm dừng màu.

  • Ví dụ sau cho thấy một linear gradient (từ trên xuống dưới) với nhiều điểm dừng màu:

Ví dụ:

Cú pháp:

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}

Sử dụng thuộc tính trong suốt.

  • CSS gradient cũng hỗ trợ độ trong suốt, có thể được sử dụng để tạo hiệu ứng mờ dần.
  • Để thêm độ trong suốt, chúng ta sử dụng hàm rgba () để xác định các điểm dừng màu. Tham số cuối cùng trong hàm rgba () có thể là một giá trị từ 0 đến 1 và nó xác định độ trong suốt của màu: 0 cho biết độ trong suốt hoàn toàn, 1 cho biết màu đầy đủ (không trong suốt).
  • Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu hoàn toàn trong suốt, chuyển sang màu đỏ đầy đủ:

Ví dụ:

Cú pháp:

#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
<h1>Linear Gradient - Transparency</h1>
<p>Để thêm độ trong suốt, chúng ta sử dụng hàm rgba () để xác định các điểm dừng màu. Tham số cuối cùng trong hàm rgba () có thể là một giá trị từ 0 đến 1 và nó xác định độ trong suốt của màu: 0 cho biết độ trong suốt hoàn toàn, 1 cho biết màu đầy đủ (không trong suốt)</p>

Thuộc tính lặp lại.

  • Sử dụng hàm repeating-linear-gradient()

Ví dụ:

Cú pháp:

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS Radial Gradients.

  • Một radial gradient được xác định bởi điểm chính giữa.
  • Để tạo một radial gradient, bạn cũng phải xác định ít nhất hai điểm dừng màu.

Radial Gradient -Evenly Spaced Color Stops- Các điểm dừng màu có khoảng cách đều nhau (đây là mặc định).

Ví dụ:

Cú pháp:

#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

Radial Gradient – Differently Spaced Color Stops – Các điểm dừng màu có khoảng cách khác nhau.

Ví dụ:

Cú pháp:

#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
<h1>Radial Gradient - Differently Spaced Color Stops</h1>

Set hình dạng.

  • Các tham số hình học sẽ giúp xác định hình dạng. Ví dụ như hình tròn hoặc elip. Tham số elip là mặc định
  • Ví dụ sau cho thấy một radial gradient có hình dạng của một vòng tròn:

Ví dụ:

Cú pháp:

#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green);
}
<h1>Radial Gradient - Shapes</h1>
<h2>Ellipse (this is default):</h2>

Sử dụng các Từ khoá Kích thước Khác nhau.

  • Tham số kích thước xác định kích thước của gradient. Nó có thể nhận bốn giá trị:
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Ví dụ:

Code:

#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
<h1>Radial Gradients - Different size keywords</h1>
<h2>closest-side:</h2>
<h2>farthest-side:</h2>
<h2>closest-corner:</h2>
<h2>farthest-corner (default):</h2>

Thuộc tính lặp lại.

Ví dụ:

Cú pháp:

#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây