8.1 Linear Gradient (linear-gradient)
Gradients trong CSS cho phép tạo ra các chuyển màu mượt mà giữa hai hoặc nhiều màu sắc. Chúng được sử dụng cho nền, nút và các thành phần khác để thêm chiều sâu và sự hấp dẫn về mặt thị giác. Trong CSS có hai loại gradient chính: linear (linear-gradient) và radial (radial-gradient).
Linear gradient tạo ra chuyển màu mượt mà giữa các màu dọc theo một đường thẳng. Hướng của đường thẳng và các chuyển màu có thể được điều chỉnh chính xác.
Cú pháp:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Nơi:
direction: hướng của gradient. Có thể được chỉ định bằng góc độ (ví dụ,45deg) hoặc từ khóa (to right,to bottom, v.v.)color-stop: xác định màu sắc và vị trí của nó trong gradient
Ví dụ 1: Linear gradient đơn giản
Trong ví dụ này, tạo ra một gradient chuyển từ màu đỏ sang xanh dương từ phải sang trái:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red, blue);
}
Ví dụ 2: Linear gradient với góc
Trong ví dụ này, gradient đi theo góc 45 độ từ màu vàng sang xanh lá cây:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(45deg, yellow, green);
}
Ví dụ 3: Linear gradient với nhiều màu
Trong ví dụ này, gradient chạy từ trên xuống dưới, chuyển dần qua bốn màu: đỏ, vàng, xanh lá cây và xanh dương:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to bottom, red, yellow, green, blue);
}
Ví dụ 4: Linear gradient với điểm dừng
Trong ví dụ này, các điểm dừng được chỉ định, xác định vị trí chính xác của mỗi màu trong gradient:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}
8.2 Radial Gradient (radial-gradient)
Radial gradient tạo ra chuyển màu mượt mà giữa các màu, xuất phát từ trung tâm hoặc điểm được chỉ định. Gradient mở rộng theo vòng tròn hoặc ellipse.
Cú pháp:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
Nơi:
shape: hình dạng của gradient (circlehoặcellipse)size: kích thước của gradient (closest-side,farthest-side,closest-corner,farthest-corner)position: vị trí của trung tâm gradient (có thể được chỉ định bằng pixel, phần trăm hoặc từ khóa nhưcenter,top,leftv.v.)color-stop: xác định màu sắc và vị trí của nó trong gradient
Ví dụ 1: Radial gradient đơn giản
Trong ví dụ này, tạo ra một radial gradient đi từ trung tâm vòng tròn, chuyển từ màu đỏ sang xanh dương:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, blue);
}
Ví dụ 2: Radial gradient với vị trí khác nhau
Trong ví dụ này, trung tâm của radial gradient được dịch chuyển lên góc trên bên trái, tạo ra chuyển từ màu vàng sang xanh lá cây:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at top left, yellow, green);
}
Ví dụ 3: Radial gradient với nhiều màu
Trong ví dụ này, gradient đi từ trung tâm vòng tròn, chuyển dần qua bốn màu: đỏ, vàng, xanh lá cây và xanh dương:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, yellow, green, blue);
}
Ví dụ 4: Radial gradient với điểm dừng
Trong ví dụ này, các điểm dừng được chỉ định, xác định vị trí chính xác của mỗi màu trong gradient:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
}
8.3 Ví dụ với gradient phức tạp
Ví dụ 1: Linear gradient với độ trong suốt
Trong ví dụ này, sử dụng độ trong suốt để tạo gradient từ màu đỏ trong suốt sang màu xanh trong suốt:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}
Ví dụ 2: Radial gradient với kích thước
Trong ví dụ này, tạo ra một radial gradient hình ellipse, lấp đầy cạnh gần nhất của phần tử:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(ellipse closest-side, red, blue);
}
Ví dụ 3: Tạo gradient cho nút
Gradient có thể làm cho các nút thêm hấp dẫn. Gradient này chạy từ trên xuống dưới, chuyển từ màu xanh lá nhạt sang xanh lá đậm, mang lại cho nút độ sâu và độ nổi:
<button type="button" class="button">Button</button>
.button {
background: linear-gradient(to bottom, #4caf50, #2e7d32);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
Lợi ích của việc sử dụng gradient:
1. Sức hấp dẫn về mặt thị giác. Gradient cho phép tạo các chuyển màu mượt mà giữa các màu, thêm chiều sâu và sức hấp dẫn cho các thành phần thiết kế.
2. Tính linh hoạt. Gradient có thể được điều chỉnh để tạo ra các hiệu ứng khác nhau, từ các chuyển đơn giản đến nền đa màu phức tạp.
3. Hỗ trợ thiết kế đáp ứng. Gradient dễ dàng thích ứng với các kích thước và độ phân giải màn hình khác nhau, làm cho chúng hữu ích trong việc tạo các thiết kế web đáp ứng.
GO TO FULL VERSION