Độ dốc CSS
Độ dốc CSS cho phép bạn hiển thị chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.
CSS định nghĩa ba loại gradient:
- Chuyển màu tuyến tính (đi xuống/lên/trái/phải/chéo)
- Độ dốc xuyên tâm (được xác định bởi tâm của chúng)
- Conic Gradien (xoay quanh điểm trung tâm)
Độ dốc tuyến tính CSS
Để tạo 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à các màu bạn muốn tạo ra sự chuyển tiếp mượt mà giữa chúng. 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 chuyển màu.
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:
Hướng - Từ 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:
Hướng - Đường chéo
Bạn có thể tạo gradient theo đường chéo bằng cách chỉ định cả vị trí bắt đầu theo chiều ngang và chiều 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:
Sử dụng góc
Nếu bạn muốn kiểm soát nhiều hơn hướng của dải màu, 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, xuống 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 "sang phải". Giá trị 180 độ tương đương với "xuống dưới".
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:
Sử dụng nhiều điểm dừng màu
Ví dụ sau đây hiển thị dải màu tuyến tính (từ trên xuống dưới) với nhiều điểm dừng màu:
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 sắc của cầu vồng và một số văn bản:
Ví dụ
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Hãy tự mình thử »Sử dụng tính minh bạch
Độ dốc CSS 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ể có giá trị từ 0 đến 1 và nó xác định độ trong suốt của màu: 0 biểu thị độ trong suốt hoàn toàn, 1 biểu thị màu đầy đủ (không có độ 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 đủ:
Ví dụ
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Hãy tự mình thử »Lặp lại độ dốc tuyến tính
Hàm lặp lại-tuyến tính-gradient() được sử dụng để lặp lại độ dốc tuyến tính:
Ví dụ
Một gradient tuyến tính lặp lại:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Hãy tự mình thử »