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