Gradient thường dùng làm trang web thẩm mỹ hơn. Thay vì dùng màu đơn sắc hộp, gradient cho phép hiển thị chuyển đổi giữa hai hoặc nhiều màu, hấp dẫn và thu hút hơn.
Để làm gradient CSS, có hai thuộc tính: linear-gradient và radial-gradient. Chúng cho phép tạo gradient tuyến tính và gradient bán kính.
Hướng dẫn thảo luận, với vài ví dụ, cách tạo gradient tuyến tính và bán kính CSS. Cuối hướng dẫn, bạn chuyên gia tạo gradient CSS.
CSS Gradients
Trong thiết kế, gradient là chuyển đổi giữa hai hoặc nhiều màu. Gradient có thể chuyển đổi đơn giản, nhưng cũng bao gồm góc, nhiều màu, và định kiểu nhiều cách.
Hai loại gradient CSS hỗ trợ:
- Linear gradients (Gradient tuyến tính)
- Radial gradients (Gradient bán kính)
Linear gradient tạo chuyển đổi giữa hai hoặc nhiều màu từ trên xuống dưới hoặc trái sang phải. Radial gradient là chuyển đổi màu phát散 từ điểm gốc, như hình dạng.
Trong CSS, gradient định nghĩa dùng thuộc tính background CSS. Thuộc tính này tạo nền phần tử web và viết tắt cho thuộc tính background CSS bao gồm background-color và background-image.
Cú pháp dùng thuộc tính background:
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
background: typeOfBackground;
Bây giờ sẵn sàng tạo gradient CSS. Bắt đầu gradient tuyến tính.
CSS Linear Gradients
Linear gradient là chuyển đổi giữa hai hoặc nhiều màu theo đường thẳng.
Ví dụ, nền gradient có thể xuất hiện trái sang phải, trên xuống dưới, hoặc góc dưới trái đến góc trên phải. Mặc định, gradient xuất hiện trên xuống dưới, nhưng bạn chỉ định hướng tùy chỉnh.
Linear gradient có color stops (điểm dừng màu), là màu bạn muốn bao gồm chuyển đổi. Không giới hạn số màu chỉ định linear gradient.
Cú pháp hàm linear-gradient CSS:
background: linear-gradient (direction, color1, color2 ...);
Trong cú pháp, direction đại diện hướng gradient, color1, color2... đại diện color stops gradient.
Khám phá vài ví dụ linear gradient CSS.
Gradient Trên xuống Dưới (Top to Bottom)
Giả sử muốn gradient xuất hiện từ trên xuống dưới hộp. Đây gradient mặc định linear-gradient().
Gradient bắt đầu màu #00C9FF (xanh nhạt), kết thúc #92FE9D (xanh lá nhạt). Mã:
.gradient { background: linear-gradient(#00C9FF, #92FE9D); }
Mã trả về:
Gradient Trái sang Phải (Left to Right)
Mặt khác, muốn gradient chuyển đổi màu trái sang phải. Làm với mã:
.gradient { background: linear-gradient(to right, #00C9FF, #92FE9D); }
Mã trả về:
Gradient chuyển đổi giữa hai màu trái sang phải. Chuyển đổi xảy ra vì chỉ định to right hướng gradient. Thay thế, nếu muốn gradient phải sang trái, dùng to left.
Gradient Chéo (Diagonal)
Bạn tạo gradient chéo dùng linear-gradient() chỉ định điểm bắt đầu ngang/dọc.
Nếu muốn gradient chuyển góc dưới phải, chỉ định to bottom right. Hoặc góc trên trái, dùng to top left.
Giả sử muốn gradient chuyển góc trên phải hộp. Làm với mã:
.gradient { background: linear-gradient(to top right, #00C9FF, #92FE9D); }
Mã trả về:
Gradient bắt đầu xanh nhạt góc dưới trái, chuyển xanh lá góc trên phải hộp.
Color Stops (Điểm dừng màu)
Cho đến nay gradient chỉ chuyển hai màu. Tuy nhiên, bạn chỉ định nhiều hơn hai màu tạo gradient phức tạp chuyển nhiều màu.
Giả sử muốn gradient chuyển từ #00D2FF (xanh nhạt) đến #92FE9D (xanh lá nhạt), đến #3A47D5 (xanh đen). Chuyển đổi trái sang phải. Tạo gradient:
.gradient { background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5); }
Mã trả về:
Trong ví dụ, gradient chuyển đổi giữa ba màu khác nhau trái sang phải.
Góc (Angles)
Trong ví dụ trước, dùng hướng định sẵn (góc trên phải đến dưới trái) tạo gradient. Nếu muốn kiểm soát hơn gradient xuất hiện, dùng góc tùy chỉnh.
Góc chỉ định giá trị đầu linear gradient, thay vì nơi chỉ định hướng.
Giả sử muốn chuyển đổi #00C9FF và #92FE9D góc 120 độ. Làm với mã:
.gradient { background: linear-gradient(120deg, #00C9FF, #92FE9D); }
Mã trả về:
Trong ví dụ, chỉ định gradient chuyển xanh và xanh lá góc 120 độ trái sang phải. Nếu muốn gradient góc 40 độ, chỉ định 40deg.
Gradient Trong suốt (Transparent Gradient)
CSS gradient làm mờ/ít mờ bằng màu RGBA.
Màu RGBA dùng RGB (đỏ, xanh lá, xanh dương) trình bày màu. Tuy nhiên, RGBA bao gồm tham số alpha xác định độ trong suốt màu. Giá trị alpha 0-1 (giá trị càng thấp càng trong suốt).
Giả sử muốn gradient trái sang phải giữa #00C9FF và #92FE9D. Màu đầu 50% trong suốt, màu cuối 30% trong suốt. Dùng mã:
.gradient { background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7)); }
Mã trả về:
So sánh gradient trước, thấy màu trong suốt hơn. Ví dụ này, dùng giá trị RGBA chỉ định màu thay vì hex.
Chỉ định 0.5 alpha màu đầu (xanh), làm màu 50% trong suốt. Chỉ định 0.3 alpha màu hai (xanh lá), làm màu 70% trong suốt (nhớ alpha càng thấp càng trong suốt).
Đường nét cứng (Hard Lines)
Thường tạo gradient, muốn chuyển đổi mượt giữa màu. Tuy nhiên, nếu muốn đường gradient tách hai màu, làm bằng chỉ định hard line.
Để chỉ định hard line, cú pháp:
linear-gradient(direction, hard-line, colors);
Vì vậy, nếu muốn hard line giữa gradient đen và xanh lá, dùng black 50%, green 50% làm hard line. Hoặc hard line 70% gradient xanh và hồng, dùng blue 70%, pink 30%.
Ví dụ gradient hard line đen giữa gradient:
.gradient { background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%); }
Mã trả về:
Trong hình, giữa gradient, vị trí dừng cứng được tạo.
CSS Radial Gradients (Gradient bán kính)
Radial gradient là chuyển đổi giữa hai hoặc nhiều màu phát tán từ điểm gốc. Điểm gốc linear gradient là ellipse hoặc circle.
Radial gradient phải có ít nhất hai color stops, không giới hạn color stops. Cú pháp radial gradient:
background: radial-gradient(shape size position, start color, next colors ..., final color);
Phân tích cú pháp:
- shape hình dạng đối tượng bán kính (mặc định ellipse).
- size kích thước hình dạng đối tượng (mặc định farthest-corner).
- at position vị trí đối tượng (mặc định center).
- start color màu đầu gradient.
- next colors ... màu giữa đầu và cuối.
- final color màu cuối gradient.
Bây giờ biết cú pháp radial gradient CSS, khám phá vài ví dụ.
Radial Gradient Mặc định (Default)
Giả sử muốn radial gradient ellipse chuyển #4B6CB7 và #D9E7FF. Làm với mã:
.gradient { background: radial-gradient(#4B6CB7, #D9E7FF); }
Mã trả về:
Trong ví dụ, tạo radial gradient hai màu giá trị mặc định. Vậy gradient đều, vị trí đối tượng giữa hộp, đối tượng ellipse.
Color Stops Khác nhau
Khi làm radial gradient, bạn chỉ định color stops riêng. Nghĩa là chuyển đổi giữa màu khác nhau gradient xảy ra vị trí cụ thể, thay vì chuyển mượt mặc định.
Giả sử muốn radial gradient chuyển #4B6CB7 đến #D9E7FF đến #9198E5. Màu đầu 25% gradient, màu giữa 50%, màu cuối 25%.
Tạo gradient mã:
.gradient { background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%); }
Mã trả về:
Gradient chuyển đổi ba màu tại điểm mã chỉ định. Đạt hiệu ứng, chỉ định màu muốn bao gồm, sau chỉ định bao nhiêu gradient cho màu. Ví dụ, màu giữa #D9E7FF chiếm 50% gradient.
Hình dạng Khác nhau
Mặc định, hình dạng radial gradient là ellipse. Tuy nhiên, bạn làm gradient circle. Làm bằng chỉ định giá trị shape circle.
Giả sử muốn gradient chuyển #4B6CB7 và #D9E7FF. Điểm trung tâm radial gradient là circle. Tạo gradient:
.gradient { background: radial-gradient(circle, #4B6CB7, #D9E7FF); }
Mã trả về:
Trong ví dụ, tạo radial gradient giữa #4B6CB7 và #D9E7FF. Điểm trung tâm radial gradient là circle, không phải ellipse.
Vị trí Radial Gradient
Vị trí đối tượng trung tâm radial gradient có thể thay đổi. Có bốn từ khóa xác định vị trí đối tượng trung tâm radial gradient:
- closest-corner
- farthest-corner
- closest-side
- farthest-side
Giả sử muốn radial gradient circle xuất hiện góc xa nhất vị trí 50px 50px. Làm với mã:
.gradient { background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF); }
Mã trả về:
Trong ví dụ, trung tâm radial gradient xuất hiện góc xa nhất 50px 50px. Bạn thấy trung tâm góc trên trái, gradient hoạt động như dự định. Sau, gradient chuyển ra ngoài màu tiếp theo mã chỉ định.
Kết luận
Gradient dùng tạo chuyển đổi giữa hai hoặc nhiều màu CSS. Hai loại chính: linear gradients và radial gradients.
Hướng dẫn thảo luận, tham chiếu ví dụ, cách tạo linear/radial gradient CSS, tùy chỉnh gradient các thuộc tính mỗi loại. Bây giờ bạn trang bị kiến thức làm việc CSS gradient như chuyên gia!