CSS Gradient⭐
Summary
- Có 3 cách chính để tạo ra gradient:
linear-gradient, radial-gradient, conic-gradient
- Để lặp lại các gradient, ta có thể sử dụng
repeating-linear-gradient, ...
functions.
Gradient
linear-gradient
- Tạo ra 1 bức ảnh với 2 hoặc nhiều màu, chuyển màu tuyến tính.
- Đơn giản nhất:
background: linear-gradient(black, white);
- Add thêm chiều thay đổi màu, bđ với từ
to
: `background: linear-gradient(to right, black, white); - Chọn điểm khởi đầu:
background: linear-gradient(45deg, darkred 30%, crimson);
- Put more color on background:
background: linear-gradient(45deg, darkred 20%, crimson, darkorange 60%, gold, bisque);
`
- Đơn giản nhất:
radial-gradient
Notes
background: radial-gradient(shape size at position, color-stops);
- Giống với linear-gradient nhưng giờ sẽ là hình tròn =))
- shape: Mặc định là
ellipse
, có thể chọn làcircle
- Size: Kích thước của gradient.
- Size keywords:
closest-side
- Gradient kéo dài từ vị trí bắt đầu đến cạnh gần nhất của container. đảm bảo gradient chạm vào cạnh gần nhất trước.farthest-side
- Gradient kéo dài từ vị trí bắt đầu đến cạnh xa nhất của box.closest-corner
- Gradient kéo dài tới góc gần nhất của box.farthest-corner
- Gradient kéo dài đến góc xa nhất của box.
- Giá trị size:
- eg:
background: radial-gradient(circle 100px 200px, red, blue);
- eg:
- Size keywords:
- Position: Vị trí bắt đầu của gradient (
center, left top, ...
) - color-stops: Các điểm dừng màu của gradient
red, blue, ...
Example:
Conic-gradient
Notes
background: conic-gradient([from angle] [at position], color-stop1, color-stop2, …);
Bắt đầu từ center point, bắt đầu quay default từ top xong quay 1 vòng tròn
Repeating and mixing
Notes
repeating-linear-gradient([angle or direction], color-stop1, color-stop2, …);
-
Mỗi loại gradient đều có hàm repeating.
repeating-linear-gradient
, …
-
angle or direction: xác định góc hoặc hướng của gradient. Eg:
90deg, to right, to bottom
-
color-stop1, color-stop2, … là các màu và vị trí của các điểm dừng màu trong gradient.
Trong ví dụ trên, màu đỏ sẽ kéo dài từ tâm ⇒ 30px, sau đó màu trắng kéo dài thêm 30px, từ 30px tới vị trí 60px, sau đó lặp lại.