CSS Gradients
CSS gradient cho phép bạn hiển thị các chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.
CSS xác định ba loại gradient:
- Điểm tuyến tính (đi xuống / lên / trái / phải / theo đường chéo)
- Radial Gradients (được xác định bởi trung tâm của chúng)
- Gradients Conic (xoay quanh một điểm chính giữa)
CSS tuyến tính Gradients
Để tạo một gradient tuyến tính, 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 màu bạn muốn tạo ra các chuyển tiếp mượt mà giữa các 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.
Cú pháp
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Hướng - Từ trên xuống dưới (đây là mặc định)
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu ở trên cùng. Nó bắt đầu màu đỏ, chuyển sang màu vàng:
Thí dụ
#grad {
background-image: linear-gradient(red, yellow);
}
Hướng - Trái sang phải
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu vàng:
Thí dụ
#grad {
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 gradient tuyến tính 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:
Thí dụ
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Sử dụng Angles
Nếu bạn muốn kiểm soát nhiều hơn 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".
Cú pháp
background-image: linear-gradient(angle, color-stop1, color-stop2);
Ví dụ sau đây cho thấy cách sử dụng các góc trên gradient tuyến tính:
Thí dụ
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Sử dụng nhiều điểm dừng màu
Ví dụ sau đây cho thấy một gradient tuyến tính (từ trên xuống dưới) với nhiều điểm dừng màu:
Thí dụ
#grad {
background-image: linear-gradient(red, yellow, green);
}
Ví dụ sau đây cho thấy cách tạo một gradient tuyến tính (từ trái sang phải) với màu của cầu vồng và một số văn bản:
Thí dụ
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Sử dụng tính minh bạch
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 tôi 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 gradient tuyến tính 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 đủ:
Thí dụ
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Lặp lại một gradient tuyến tính
Hàm lặp lại tuyến tính-gradient () được sử dụng để lặp lại các gradient tuyến tính:
Thí dụ
Một gradient tuyến tính lặp lại:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}