Hàm CSS color-mod

Ta đã có các chức năng màu trong các bộ tiền xử lý như Sass trong một thời gian. Khả năng điều chỉnh và sửa đổi màu sắc này sẽ sớm có trong CSS với CSS Color Module Cấp 4 . Ta sẽ có thể áp dụng một số công cụ điều chỉnh màu sắc cho các màu cơ bản. Điều này trở nên rất tiện dụng khi được kết hợp với các biến CSS , vì có thể có các màu cơ bản của ta được xác định là các biến và sau đó áp dụng các bộ điều chỉnh khi cần thiết.

Lưu ý color-mod trước đây chỉ được gọi là chức năng màu . Tên gần đây đã được thay đổi trong thông số kỹ thuật thành color-mod.

Dưới đây là một ví dụ về cách sử dụng hàm mod màu:

.box {
  // Let's make it a little redder
  color: color-mod(rgb(147,123,25) red(218));
}

Hoặc với giá trị HEX làm màu cơ bản:

.box {
  color: color-mod(#937b19 contrast(25%);
}

Hoặc thậm chí với các thuộc tính được tính toán (biến CSS):

:root {
  --base-color: #937b19;
}

.box {
  color: color-mod(var(--base-color) tint(59%));
}

Màu kết quả từ các đoạn mã trên sẽ là rgb (218, 123, 25) .

Bạn có thể sử dụng nhiều bộ điều chỉnh màu trong cùng một chức năng màu:

.box {
  color: color-mod(purple lightness(62%) red(218) blue(202) whiteness(25%));
}

Bộ điều chỉnh màu sắc

Dưới đây là danh sách các bộ điều chỉnh màu có sẵn:

alpha : Một giá trị cho độ trong suốt alpha từ 0% đến 100%.
đỏ , lục & lam : Giá trị từ 0 đến 255. Với màu bắt đầu là rgb (140, 254, 255) , giá trị màu đỏ bắt đầu sẽ là 140 , vì vậy bất kỳ giá trị nào cao hơn 140 sẽ làm tăng lượng màu đỏ và bất kỳ thứ gì thấp hơn 140 làm giảm lượng màu đỏ. Màu xanh lá cây và xanh lam hoạt động theo cùng một cách, ảnh hưởng đến màu sắc tương ứng của chúng.
độ đen & độ trắng : Giá trị từ 0% đến 100%.
tương phản : Giá trị từ 0% đến 100%.
bão hòa : Giá trị từ 0% đến 100%. 0% là màu xám.
độ nhạt : Giá trị từ 0% đến 100%. 0% là màu đen và 100% là màu trắng.
tint : Giá trị từ 0% đến 100%.
màu sắc : Một giá trị từ 0 đến 360.
bóng râm : Giá trị từ 0% đến 100%. 100% là màu đen.
Blend : Blend giúp bạn dễ dàng pha trộn một màu với một màu khác. Đây là một ví dụ nếu đó là cách sử dụng:

.box {
  color: color-mod(hotpink blend(yellow 59%));
}

Hỗ trợ trình duyệt

CSS Colors Level 4 vẫn đang ở giai đoạn Bản thảo làm việc trong quá trình đề xuất và chức năng màu chưa được triển khai trong bất kỳ trình duyệt nào. Tuy nhiên, tin tốt là bạn có thể bắt đầu sử dụng nó ngay hôm nay, nhờ có PostCSS và plugin cssnext .

👉 Checkout ColorMe.io , một công cụ tuyệt vời giúp bạn soạn màu với chức năng tô màu.

Tags:

Các tin liên quan

CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13