Khi nói đến việc làm cho giao diện người dùng của bạn nổi bật, không gì bằng việc chọn bảng màu phù hợp. Với hướng dẫn này, bạn sẽ học cách dễ dàng gán màu cho các phần tử, phông chữ và bất kỳ thứ gì khi bạn xây dựng giao diện người dùng của mình.
Để thêm màu, CSS có color kiểu dữ liệu, đại diện cho màu ở định dạng tiêu chuẩn Đỏ, Xanh lục, Xanh lam (RGB).
màu Cú pháp
Có một số cách để bạn có thể xác định màu sắc bằng CSS:
- Với các từ khoá. Chúng được nhập dưới dạng chuỗi, như "red", "white", "yellow" hoặc hex number như #fff.
- Với ký hiệu thập lục phân, ví dụ:#fff.
- Qua
rgb()hoặcrgba()ký hiệu chức năng. - Hoặc sử dụng các hàm HSL như
hsl()vàhsla().
Sử dụng số nhận dạng từ khóa
Cách dễ nhất để thêm màu vào bất kỳ phần tử nào cần nó, là sử dụng các thuộc tính từ khóa.
Xin lưu ý rằng có những sắc thái đối với thuộc tính cụ thể mà bạn sẽ sử dụng để thêm màu, làm nền, văn bản hoặc một phần tử. Đối với ví dụ của chúng tôi, chúng tôi sẽ sử dụng một nút cũ.
<button class="color">Color Me</button>
Với phần tử nút của chúng tôi, chúng tôi có hai tùy chọn để thêm màu. Qua background-color thuộc tính hoặc color bất động sản. Trong trường hợp này thuộc tính màu thay đổi màu của văn bản và màu nền, màu của nền. Hãy tiếp tục và chọn nút của chúng tôi, sau đó thêm màu sắc vào nút của chúng tôi!
Dễ dàng phải không?
rgba () Hàm và hsl ()
Vì vậy, bạn có thể xem cách sử dụng từ khóa để thêm màu vào các thuộc tính màu cụ thể. Bạn có thể tham khảo bảng màu từ khóa này để xem tất cả các tùy chọn có sẵn. Mặc dù màu sắc của từ khóa cung cấp cho chúng ta nhiều màu có thể có, nhưng nó có thể bị hạn chế.
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ọ.
Các màu từ khóa này, hoặc gần như bất kỳ màu nào khác, cũng có thể được biểu thị dưới dạng hệ thập phân RGB hoặc RGB. Ví dụ:"black" sẽ là # 000000 hoặc 0,0,0 ở dạng thập phân, v.v. Bạn có thể nhận được các màu cụ thể hơn với các tùy chọn thập lục phân hoặc thập phân này.
Một cách dễ dàng để thêm số thập phân RGB là sử dụng rgb() chức năng. Giá trị tối đa của mỗi số thập phân là 255. Hãy thay đổi màu từ khóa của chúng tôi để hiển thị hai tùy chọn mới sau:
button.color {
/* RGB and decimal */
color: #fff;
background-color: rgb(210,105,30);
} Bạn có nhận thấy rằng màu đen có các ký tự giống nhau được lặp lại không? Khi nó là cùng một ký tự, bạn có thể chỉ cần nhập ba ký tự đầu tiên giống như tôi đã làm cho màu trắng ở trên. Điều này cũng có thể được biểu thị bằng #ffffff.
Một tùy chọn khác để thêm màu là sử dụng hsl() chức năng. HSL là viết tắt của màu sắc, độ bão hòa và độ sáng. Độ sáng thể hiện phần trăm từ trắng (100%) đến đen (0%). Độ bão hòa cũng là một tỷ lệ phần trăm nhưng của màu xám trong đó 100% là màu xám 'đầy đủ'. Hue đại diện cho độ (0 đến 360) trong bánh xe màu dưới dạng RGB trong đó 0 là màu đỏ, 120 là xanh lục và 240 là xanh lam. Tôi biết điều này nghe có vẻ phức tạp &# 128517;.
Các trình chỉnh sửa mã như Visual Studio cung cấp bộ chọn màu mà bạn có thể chơi. Hãy tiếp tục và nhập hsl() sau đó di chuột và xem công cụ chọn màu bật lên.
Phía bên trái, bạn có thể điều chỉnh màu sắc, và hai thanh khác là độ bão hòa và độ sáng. Chơi với nó và xem bạn có thể nhận được những màu sắc thú vị nào. HSL hữu ích cho các sắc thái và chúng ta có thể thao tác với độ bão hòa và độ đậm nhạt. Một số người thích nó vì nhu cầu cụ thể của họ.
Sửa đổi độ mờ của màu
Bạn có thể nhận thấy rằng cả hai hàm rgb và hsl đều có thể được thể hiện bằng rgba() hoặc hsla() . Chữ ‘a’ là viết tắt của alpha nhưng gần như là độ trong suốt / độ mờ trong đó 0 là trong suốt và 1 là hoàn toàn không trong suốt.
Bằng cách thay đổi độ mờ, bạn có thể tinh tế hơn với màu sắc của mình. Hãy hoàn thiện màu nút của chúng ta bằng cách sửa đổi độ mờ của nó:
button.color {
color: #fff;
background-color: rgba(210,105,30, 0.7);
} Với độ mờ, văn bản của chúng tôi thực sự đọc tốt hơn nhiều!
