5.1 Linear Gradient
Gradient là một công cụ mạnh mẽ trong thiết kế web, cho phép tạo ra các chuyển đổi mượt mà giữa các màu mà không cần dùng hình ảnh. CSS cung cấp hai loại gradient chính: tuyến tính (linear-gradient)
và hướng tâm (radial-gradient). Những gradient này được dùng làm nền của các phần tử,
tạo nút và các hiệu ứng hình ảnh khác.
Linear Gradient (linear-gradient)
Linear gradient tạo ra sự chuyển tiếp mượt mà giữa hai hoặc nhiều màu theo một đường (trục) xác định. Đường này có thể là ngang, dọc hoặc ở bất kỳ góc nào.
Cú pháp
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Giá trị
direction: hướng của gradient. Có thể chỉ định bằng độ (vd:90deg), sử dụng các từ khóa (vd:to right,to bottom left)color-stop: điểm dừng màu, xác định màu sắc và vị trí của nó trong gradient
Ví dụ sử dụng
Gradient ngang:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Gradient ngang</div>
</body>
Gradient dọc:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Gradient dọc</div>
</body>
Gradient chéo:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Gradient chéo</div>
</body>
Gradient nhiều màu:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Gradient nhiều màu</div>
</body>
Giải thích code:
to right: gradient đi từ trái qua phảito bottom: gradient đi từ trên xuống dưới45deg: gradient đi theo góc 45 độred,yellow,green,blue: nhiều điểm dừng màu để tạo ra gradient nhiều màu
5.2 Radial Gradient
radial-gradient tạo ra sự chuyển tiếp mượt mà giữa các màu, xuất phát từ trung tâm và lan ra ranh giới của hình tròn
hoặc hình elip. Radial gradient có thể tạo các hiệu ứng hình ảnh thú vị như mô phỏng không gian ba chiều.
Cú pháp:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Giá trị:
shape: hình dạng của gradient, có thể làcircle(hình tròn) hoặcellipse(hình elip) (giá trị mặc định)size: kích thước của gradient, có thể làclosest-side,closest-corner,farthest-side,farthest-cornerposition: vị trí của trung tâm gradient, có thể chỉ định bằng phần trăm, pixel hoặc sử dụng các từ khóa (vd:center,topleft)color-stop: điểm dừng màu, xác định màu sắc và vị trí của nó trong gradient
Ví dụ sử dụng
Gradient hình tròn:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Gradient hình tròn</div>
</body>
Gradient elip:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Gradient elip</div>
</body>
Gradient từ trung tâm:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Gradient từ trung tâm</div>
</body>
Gradient từ góc:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Gradient từ góc</div>
</body>
Giải thích code:
circle: tạo gradient hình trònellipse: tạo gradient hình elipat center: gradient bắt đầu từ trung tâmat top left: gradient bắt đầu từ góc trên bên tráired,blue,green: nhiều điểm dừng màu để tạo gradient nhiều màu
5.3 Cài đặt bổ sung cho gradient
Gradient lặp
1. Gradient tuyến tính lặp (repeating-linear-gradient)
Gradient tuyến tính lặp tạo ra một mẫu lặp lại với gradient tuyến tính.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Gradient hướng tâm lặp (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Điểm dừng màu trong suốt
Điểm dừng màu có thể bao gồm độ trong suốt để tạo ra hiệu ứng hình ảnh phức tạp hơn.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Sử dụng đồng thời nhiều gradient
Có thể sử dụng nhiều gradient để tạo nền phức tạp.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION