CSS - Gradients: Một Chuyến Đi Màu Sắc Cho Người Mới Bắt Đầu

Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ lặn sâu vào thế giới sống động của các梯度 CSS. Hãy thắt chặt dây an toàn, vì chúng ta sắp tô màu web với những màu sắc hòa quyện mượt mà vào nhau. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ tạo ra những kiệt tác màu sắc khiến ngay cả Picasso cũng phải ghen tị!

Gradients là gì?

Hãy tưởng tượng bạn đang sơn một bức tường, nhưng thay vì chỉ sử dụng một màu, bạn muốn nó dần thay đổi từ màu này sang màu khác. Đó chính xác là điều mà gradient CSS làm, nhưng trên trang web của bạn! Đây là cách để chuyển đổi mượt mà giữa hai hoặc nhiều màu, tạo ra những hiệu ứng bắt mắt mà không cần sử dụng hình ảnh.

Các loại gradients CSS

Trong bảng màu CSS, chúng ta có ba loại gradients chính:

1. Gradients tuyến tính (Linear Gradients)
2. Gradients tròn (Radial Gradients)
3. Gradients hình nón (Conic Gradients)

Hãy cùng khám phá chi tiết từng loại này nhé?

Gradients tuyến tính

Gradients tuyến tính giống như một đường thẳng của màu sắc thay đổi từ điểm A đến điểm B. Đây là loại phổ biến và dễ hiểu nhất, hãy bắt đầu từ đây.

.linear-gradient {
background: linear-gradient(to right, red, yellow);
}

Trong ví dụ này, chúng ta đang tạo một gradient từ trái sang phải, bắt đầu từ đỏ và kết thúc bằng vàng. Đơn giản phải không?

Nhưng đợi đã, còn nhiều hơn nữa! Chúng ta cũng có thể chỉ định hướng bằng góc:

.angled-gradient {
background: linear-gradient(45deg, blue, green);
}

Điều này tạo ra một gradient斜 từ xanh lam sang xanh lá cây ở góc 45 độ.

Gradients tròn

Gradients tròn giống như những cơn mưa hình tròn, với các màu sắc tỏa ra từ một điểm köz tâm.

.radial-gradient {
background: radial-gradient(circle, red, yellow, green);
}

Điều này tạo ra một gradient hình tròn bắt đầu từ đỏ ở köz tâm, sau đó là vàng, và cuối cùng là xanh lá cây ở ngoài cùng.

Gradients hình nón

Gradients hình nón là những đứa trẻ mới toại. Chúng giống như một bánh xe màu sắc, với các màu sắc xoay quanh một điểm köz tâm.

.conic-gradient {
background: conic-gradient(red, yellow, green, blue, red);
}

Điều này tạo ra một vòng quay đầy đủ của các màu sắc, bắt đầu và kết thúc bằng đỏ.

Cú pháp

Bây giờ, hãy phân tích cú pháp cho các gradients này:

Loại Gradient	Cú pháp cơ bản
Tuyến tính	linear-gradient([hướng,] màu1, màu2, ...)
Tròn	radial-gradient([hình dạng kích thước tại vị trí,] màu1, màu2, ...)
Hình nón	conic-gradient([từ góc,] màu1, màu2, ...)

Gradients cho viền

Bạn có biết rằng bạn cũng có thể sử dụng gradients cho viền không? Đó như thể tặng cho các yếu tố của bạn một chiếc cà vạt sang trọng!

.gradient-border {
border: 10px solid;
border-image: linear-gradient(to right, red, blue) 1;
}

Điều này tạo ra một viền chuyển đổi từ đỏ sang xanh lam.

Định vị các điểm dừng màu

Các điểm dừng màu giống như các trạm kiểm tra trong gradient. Bạn có thể định vị chúng chính xác:

.color-stops {
background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}

Điều này tạo ra một gradient với các điểm chuyển màu cụ thể ở 20%, 40%, 60%, và 80% của chiều rộng của yếu tố.

Tạo các đường phân cách sắc nét

Muốn có sự thay đổi màu sắc đột ngột thay vì chuyển đổi mượt mà? Chỉ cần sử dụng cùng một phần trăm cho các điểm dừng màu liền kề:

.hard-lines {
background: linear-gradient(to right, red 50%, blue 50%);
}

Điều này tạo ra một đường phân cách sắc nét giữa đỏ và xanh lam ở köz tâm.

Tạo các dải màu sử dụng gradients

Bạn có thể tạo ra các dải màu bằng cách lặp lại các điểm dừng màu:

.color-bands {
background: linear-gradient(to right, red 25%, yellow 25% 50%, green 50% 75%, blue 75%);
}

Điều này tạo ra bốn dải màu có độ rộng bằng nhau.

Gradients chồng lên nhau

Muốn tạo ra điều gì đó thực sự ấn tượng? Đặt nhiều gradients lên nhau:

.stacked-gradients {
background:
linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,0,0,0)),
linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(0,0,255,0));
}

Điều này tạo ra một gradient đỏ từ trái sang phải và một gradient xanh từ trên xuống, chồng lên nhau.

Các hàm liên quan

CSS gradients là một phần của một họ lớn các hàm hình ảnh. Dưới đây là một số hàm liên quan:

Hàm	Mô tả
repeating-linear-gradient()	Tạo ra một gradient tuyến tính lặp lại
repeating-radial-gradient()	Tạo ra một gradient tròn lặp lại
repeating-conic-gradient()	Tạo ra một gradient hình nón lặp lại
image()	Tạo ra một giá trị hình ảnh
image-set()	Cho phép bạn cung cấp nhiều nguồn hình ảnh cho các độ phân giải hiển thị khác nhau

Và thế là bạn đã hoàn thành khóa học nhanh về gradients CSS rồi, các bạn! Lưu ý, chìa khóa để thành thạo gradients là thử nghiệm. Đừng ngại thử nghiệm với các màu sắc, góc độ và vị trí khác nhau. Ai biết đâu, bạn có thể tạo ra xu hướng lớn tiếp theo trong thiết kế web!

Bây giờ, hãy tiến lên và tô màu web với quyền lực gradient mới của bạn. Và nhớ rằng, trong thế giới CSS, không có lỗi lầm, chỉ có những bất ngờ vui vẻ (như Bob Ross từng nói). Chúc các bạn viết mã vui vẻ!

Credits: Image by storyset