9.1 Kết hợp các hàm màu sắc
Thiết kế web đòi hỏi sự hiểu biết sâu sắc hơn và ứng dụng các hàm màu để tạo ra các giao diện phức tạp nhưng hài hòa và linh hoạt. Cùng xem qua các thao tác phức tạp hơn với màu sắc trong CSS bằng cách sử dụng các hàm
rgba(), hsla(), hsl() và rgb().
Ví dụ 1: Tạo gradient trong suốt
Để tạo ra các gradient phức tạp, có thể kết hợp nhiều hàm màu.
Trong ví dụ này, chúng ta sử dụng một gradient tuyến tính kết hợp các màu trong suốt, được đặt bằng rgba() và hsla():
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
Ví dụ 2: Gradient với nhiều màu sắc
Đây là một gradient tuyến tính có góc 45 độ, chuyển đổi mượt mà qua năm màu, mỗi màu được đặt bằng các hàm màu khác nhau:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 Tạo bóng phức tạp và hiệu ứng trong suốt
Ví dụ 3: Bóng với rgba()
Trong ví dụ này, chúng ta tạo một bóng phức tạp, sử dụng các màu trong suốt để tạo hiệu ứng chiều sâu và ánh sáng:
<div class="shadow"></div>
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
Ví dụ 4: Viền và nền trong suốt
Viền và nền trong suốt có thể được tạo ra bằng rgba() và hsla(), cho phép tạo ra các hiệu ứng nhiều lớp và có kết cấu:
<div class="border-background"></div>
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 Animation và chuyển đổi với hàm màu
Ví dụ 5: Animation nền với hsl()
Trong ví dụ này, chúng ta sử dụng một animation, chuyển màu nền qua các sắc thái khác nhau sử dụng hsl():
<div class="animated-background"></div>
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
Ví dụ 6: Chuyển đổi màu sắc văn bản
Ở đây, văn bản thay đổi màu sắc và độ trong suốt một cách mượt mà khi di chuột qua, sử dụng rgba() và thuộc tính transition:
<div class="text-transition">Một số văn bản</div>
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 Sử dụng CSS Variables
Hãy xem qua các ví dụ về việc sử dụng CSS Variables với các hàm màu sắc.
Ví dụ 7: Biến và hàm màu sắc
Việc sử dụng CSS Variables với các hàm màu sắc cho phép quản lý màu sắc tập trung và tạo các kiểu phức tạp nhưng dễ quản lý:
<div class="advanced"></div>
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
Ví dụ 8: Kết hợp nhiều gradient
Trong ví dụ này, hai gradient tuyến tính được chồng lên nhau, tạo ra một hiệu ứng nhiều lớp phức tạp:
<div class="multi-gradient"></div>
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION