Chức năng màu sắc trong Sass và Compass. Từ các màu có sẵn, tạo sơ đồ động dựa trên màu cơ bản
Hơn 125 năm trước, nghệ sĩ theo trường phái ấn tượng vĩ đại Claude Monet đã thay đổi cách hiểu của chúng ta về màu sắc bằng cách coi một yếu tố như ánh sáng. Cho đến nay, nghiên cứu của ông vẫn chưa áp dụng được vào thiết kế web. Nhưng các bộ tiền xử lý như Sass cho phép bạn nghĩ về bảng màu theo một cách mới:
Claude Monet, Haystacks: Hiệu ứng của tuyết (1891). Phòng trưng bày Quốc gia Scotland; hình ảnh cho công chúng xem.
Trong lịch sử, khả năng truyền tải màu sắc đẹp trên Web còn hạn chế và hầu hết các trường hợp đều dựa vào mã được ghim tĩnh Màu CSS. Trong khi việc thao tác màu sắc nhanh chóng vẫn khó nắm bắt.
May mắn thay, các công cụ mới cho chúng ta nhiều lựa chọn hơn để làm việc với màu sắc. Nhưng CSS vẫn khá thiếu linh hoạt. Đây là nơi mà bộ tiền xử lý có thể rất hữu ích cho chúng ta. Hãy xem xét một số tính năng của chúng có thể cải thiện đáng kể phong cách của chúng ta:
- Biệt hiệu giúp chúng ta hiểu rõ hơn về màu sắc chúng ta sử dụng;
- Ánh sáng, bóng đổ và chia tỷ lệ cho phép các bảng màu linh hoạt ở độ phân giải khá cao;
- Trộn màu sắc cho phép bạn mở thế giới mới sắc thái tinh tế và bán sắc.
Mã sáu chữ số
Ban phai biet giá trị chính xác mã màu để áp dụng chúng. Điều này có nghĩa là trừ khi bạn sử dụng tên màu đặt trước, biểu định kiểu của bạn luôn chứa đầy các mã sáu chữ số khó hiểu hoặc số HSL khó hiểu. Nhưng nếu màu chúng ta đang sử dụng không thực sự có tên thì sao? Đây là nơi Sass đến giải cứu chúng tôi. Các bộ tiền xử lý khác có thể có chức năng tương tự, nhưng tôi để bạn tự mình khám phá điều này.
Hãy bắt đầu để bạn có thể hiểu ý tôi.
Chúng tôi sẽ tạo ra nhãn hiệu mới và chọn hai màu để hiển thị nó. Điều đầu tiên tôi sẽ làm là đặt tên cho các màu: $toolbox và $ol-blue :
Hiện tôi đang sử dụng chúng để tạo trang web cho Công ty Cung ứng Du lịch Gullfoss. Ý tưởng thiết kế cho trang web này là sự liên kết với thẻ hành lý. TRONG Những nơi khác nhauđịa điểm gặp gỡ Các tùy chọn khác nhau(sáng hơn) và sắc thái (tối hơn) của các màu sau:
Trang web giả định của Gullfoss Travel Supply Co.
Ví dụ, hãy xem xét nút này:
Tôi muốn nút này trông giống như một phần tử có thể nhấp vào, có thể dễ dàng đạt được điều này bằng một dải chuyển màu đơn giản. Cơ sở của nút là màu của hộp công cụ $. Và điểm nổi bật của nó là tông màu sáng hơn và tối hơn.
Theo truyền thống, tôi sẽ phải đặt chúng trong CSS như thế này:
nút( màu nền: $toolbox; // hình nền chính: gradient(hsl(0, 33%, 52%), // sáng $toolbox, hsl(0, 41%, 39%); // tối) )
Màu sắc chính của nút là một trong các màu thương hiệu, hai màu còn lại ( sáng và tối) không phải là hằng số Sass. Tôi cần phải hỏi họ. Mở bộ chọn màu và chọn một mẫu màu theo cách thủ công. Nhưng nếu tôi muốn thêm một nút dựa trên màu $ol-blue , thì tôi cần phải quay lại bảng màu một lần nữa và chọn các giá trị mới.
Và đối với mỗi nút này, bạn vẫn cần mô tả trạng thái di con trỏ! Ở trạng thái này, tông màu sáng và tối sẽ nhạt hơn trên nút ở trạng thái bình thường nên mình sẽ phải khai báo thêm 4 hằng số. Hoặc chỉ cần nhập các giá trị cụ thể một lần và hy vọng rằng tôi sẽ không cần những màu này ở nơi nào khác.
Nhưng Sass có thể làm điều đó cho tôi. Nó chứa các hàm tích hợp để xử lý các màu này mà không cần phải đặt các biến thể khác nhau của chúng theo cách thủ công.
Đóng gói bộ chọn màu cho Sass
Một cách để làm cho màu nhạt hơn là sử dụng chức năng làm sáng:
làm sáng ($ hộp công cụ, 20%);
Và để làm đậm màu, chúng ta có thể sử dụng hàm làm tối:
làm tối($ol-blue, 30%);
Hãy xem xét trường hợp tiếp theo: Nếu chúng ta làm sáng $toolbox đi 50%, chúng ta sẽ có được một phiên bản rất nhạt của màu này. Nhưng nếu chúng ta làm sáng $ol-blue đi 50%, chúng ta sẽ có được màu trắng hoàn toàn. Bởi vì $ol-blue nhẹ hơn nhiều so với $toolbox .
Để biết chúng ta có thể làm sáng một màu đến mức nào mà nó không chuyển sang màu trắng hoàn toàn, chúng ta cần biết trước giá trị độ sáng của màu đó. Thông tin này được mã hóa thuận tiện trong các giá trị HSL. Nếu chúng ta trừ đi độ sáng của màu từ 100% thì kết quả là lượng chúng ta cần làm sáng màu để có được màu trắng hoàn toàn:
Giá trị độ sáng của $ol-blue là 60% và chúng ta có thể làm sáng nó lên tới 40% mà nó không chuyển sang màu trắng hoàn toàn. Độ sáng của $toolbox là 40%, vì vậy chúng ta có thể tăng độ sáng lên 60%:
Khi chúng ta làm sáng màu, $ol-blue sẽ chuyển sang màu trắng nhanh hơn $toolbox vì nó có nhiều giá trị caođộ sáng cơ bản
Khi chúng ta làm tối màu, $toolbox sẽ chuyển sang màu đen hoàn toàn nhanh hơn $ol-blue vì nó có giá trị độ sáng cơ bản thấp hơn.
Để làm chủ được bảng màu mới này, chúng ta cần ghi nhớ các giá trị độ sáng cho từng màu.
Bảng màu tỷ lệ với sự thay đổi màu sắc
Sass bao gồm một hàm màu sắc thang màu() cho phép bạn dịch chuyển các thành phần màu sắc theo tỷ lệ. scale-color() hoạt động với các kênh RGB cũng như độ bão hòa và độ sáng HSL. Để điều chỉnh màu sắc tương tự, bạn cần sử dụng hàm adjustment-hue() cùng tên.
Như tôi đã lưu ý trước đó, nếu chúng ta tăng độ sáng $ol-blue lên 50%, nó sẽ chuyển thành màu trắng tinh khiết, nhưng nếu chúng ta tăng độ sáng tương ứng lên 50% bằng cách sử dụng hàm tỉ lệ-color():
màu tỷ lệ($ol-blue, độ sáng, 50%);
- khi đó chúng ta sẽ thu được một màu có độ sáng trung gian giữa màu gốc và màu trắng tinh khiết.
Bây giờ tôi biết chính xác mình cần phải di chuyển bất kỳ màu nào của mình đến mức nào để có được màu trắng tinh khiết: nó luôn là 100%. Nếu tôi tăng độ sáng của $ol-blue lên 99% thì nó vẫn sẽ là 1 phần trăm $ol-blue. Bạn có thể xử lý $toolbox hoặc bất kỳ màu nào khác theo cách tương tự. Ngoại trừ những màu vốn đã quá nhạt và có thể chuyển sang màu trắng tinh sớm hơn rất nhiều. Đối với họ, độ sáng ban đầu sẽ là 100%.
Bạn có thể dễ dàng hiểu ý tôi bằng cách nhìn vào biểu đồ màu bên dưới:
Khi độ sáng của màu sắc thay đổi, chúng trở nên nhạt hơn và dễ đoán hơn.
Các tùy chọn màu tối hơn cũng được thiết lập tương ứng.
Với hàm tỷ lệ màu(), bạn có thể chỉ định một số lượng hằng số cơ sở có giới hạn trong bảng màu nhưng vẫn giữ được tính linh hoạt để xử lý các tông màu và sắc thái. Bây giờ khai báo gradient của chúng ta có thể được định nghĩa như sau:
nút( màu nền: $toolbox; // hình nền chính: gradient(scale-color($toolbox, lightness: 50%), $toolbox,scale-color($toolbox, lightness: -30%);) ) nút: di chuột, nút: tiêu điểm( màu nền: màu tỷ lệ ($ hộp công cụ, độ sáng: 50%); // hình nền chính: gradient (màu tỷ lệ ($ hộp công cụ, độ sáng: 60%), tỷ lệ hộp công cụ $ -color($toolbox, độ sáng: -20%);) ) nút.secondary( màu nền: $ol-blue; // hình nền chính: gradient(scale-color($ol-blue, độ sáng: 50% ), $ol-blue, vảy-color($ol-blue, độ sáng: -30%);) ) nút.secondary:hover, nút.secondary:focus( màu nền: màu tỷ lệ($ol-blue, độ sáng: 50%), // hình nền dự phòng: gradient(scale-color($ol-blue, lightness: 60%), $ol-blue, value-color($ol-blue, lightness: -20%) ;) )
Trong ví dụ này tôi chỉ sử dụng hai hằng số và dịch chuyển chúng theo ý muốn. Trên thực tế, chúng có thể được sử dụng xuyên suốt toàn bộ trang. Trong nội dung trang chủ Công ty cung cấp du lịch Gullfoss Chỉ có hai màu thương hiệu được sử dụng, chuyển sang các giá trị độ sáng khác nhau. Mặc dù bảng màu đơn giản nhưng chúng ta có thể tùy chỉnh nó một cách linh hoạt.
Quy định màu sắc bằng cách sử dụng phụ gia
Có một cách khác để bạn có thể tạo các bảng tỷ lệ tương tự - hàm mix().
Nếu chúng ta muốn làm sáng $ol-blue đi 60 phần trăm, chúng ta sẽ viết:
hỗn hợp(trắng, $ol-blue, 60%)
Bạn có thể hình dung nó như thể chúng ta trộn một ống sơn trắng với một ống sơn màu. $ol-xanh. Nếu chúng ta muốn làm tối $ol-xanh, Chúng tôi sẽ viết:
hỗn hợp(đen, $toolbox, 30%)
Hóa ra việc trộn lẫn với màu trắng hoặc đen được coi là giống như việc thay đổi độ sáng của một màu, nhưng sẽ thuận tiện hơn vì chúng ta cần gõ ít ký tự hơn. Ngoài ra mix() sẽ giúp bạn dễ dàng tạo vẻ bề ngoài các trang web mà trước đây không thể truy cập được.
Hãy xem xét những bức vẽ về đống cỏ khô của Monet. Họ nắm bắt được trò chơi của ánh sáng một cách tuyệt vời. Nhưng từ quan điểm thiết kế, chúng ta có thể loại bỏ chúng bài học hữu ích. Theo một nhà ấn tượng người Pháp khác, Pierre Bonnard, " Màu sắc không tạo ra ấn tượng dễ chịu về bức tranh - nó làm nổi bật nó". Hãy nhớ màu sắc của ánh sáng ảnh hưởng như thế nào đến vẻ ngoài của đống cỏ khô của Monet. Điều gì sẽ xảy ra nếu chúng ta có thể lấy những màu cơ bản và dễ dàng thay đổi chúng trong thiết kế, giống như ông đã làm vào năm 1890?
Hàm Sass mix() mang đến cho chúng ta cơ hội này. Hãy lấy lại bảng màu của chúng ta và thêm một vài màu bổ sung vào đó: ánh sáng và bóng tối. Bây giờ, hãy kết hợp lại các màu thương hiệu của chúng ta, nhưng thay vì trộn chúng với màu đen và trắng, hãy sử dụng các màu mới:
Ngay lập tức toàn bộ bảng màu trở nên ấm áp và mềm mại, và hơn thế nữa màu tối- phong phú và tươi sáng.
Làm sáng màu vàng mang lại cho toàn bộ bảng màu những sắc thái nắng.
Làm tối bằng màu bóng làm cho bảng màu tự nhiên hơn.
Nếu không thích thiết kế này, tôi có thể chọn giá trị mới cho 2 hằng số này, lần sau Sass sẽ biên dịch chúng thành CSS và thiết kế sẽ tự động phản ánh những thay đổi.
Trong kế hoạch mới này, tôi lại bắt đầu với bảng màu tương tự của thương hiệu, nhưng bây giờ tôi chọn màu hồng đậm cho tông màu sáng và xanh đậm cho tông màu tối:
Điều này thay đổi hoàn toàn giao diện của bảng màu nhưng vẫn dựa trên hai màu chính của thương hiệu chúng tôi.
Những thay đổi về tông màu sáng và tối sẽ tự động được hiển thị trong bảng màu khi Sass biên dịch CSS.
Các tông màu sáng và tối có thể được thay đổi để tạo tâm trạng hoặc chủ đề phù hợp cho trang web của bạn mà không cần chúng tôi phải thực hiện các thay đổi tốn thời gian đối với tất cả các kiểu.
Quay lại trang web của Công ty Cung ứng Du lịch Gullfoss. , trên trang của mỗi nhãn dán, tôi đã trình bày một số khả năng mà việc trộn màu như vậy mang lại cho chúng ta. Nếu chúng ta nhìn vào trang của Olympia, không khí hoàn toàn khác với trang chủ, nhưng tất cả bố cục, phông chữ và bố cục cơ bản vẫn giống nhau. Mỗi màu được pha một tông vàng nhạt hoặc một tông tím đậm nên ta thấy trang ( theo đúng nghĩa đen) dưới một ánh sáng mới. Nền nội dung đã trở thành màu vỏ trứng và " Thêm vào giỏ"- màu sắc sống động tự nhiên hơn:
Nhãn dán Lincoln có rất nhiều tông màu nền và sắc đỏ trong đó, vì vậy tôi muốn điều đó được phản ánh xuyên suốt các thành phần của trang. Tôi chọn tông màu sáng và tối màu đỏ để phù hợp với thiết kế với hình minh họa:
Nếu bạn nhìn vào trang này để tìm Hồ bơi Barton Springs, bạn sẽ thấy nó bị chi phối bởi tông màu của nước mát và lá xanh. Sự khác biệt giữa màu gốc và màu mới khá tinh tế nhưng đáng chú ý. Màu sắc cần được kết hợp một cách gắn kết để tạo nên tính thẩm mỹ giúp nâng tầm thiết kế:
Nếu bạn đang tìm kiếm kịch tính thì trang Grid là dành cho bạn. Các sắc thái sáng và tối mang lại cho cô ấy vẻ ngoài Tron-esque. Sự thay đổi mạnh mẽ như vậy đạt được chỉ bằng cách thay đổi một vài hằng số.
Một vài điều nữa giúp bạn thiết kế bảng màu của riêng mình
Hầu hết mọi màu sắc trên các trang này đều được pha trộn với các sắc thái sáng hoặc tối, nhưng đôi khi các yếu tố thiết kế có thể trông quá đồng nhất và do đó chúng hòa trộn với nhau. Trong những trường hợp như vậy, đừng ngại bổ sung cho dự án của bạn một bộ vòi màu mới. Điều này sẽ giúp trang của bạn có màu sắc nổi bật và khiến chúng trông rực rỡ hơn.
Có rất nhiều công cụ và kỹ thuật để làm việc với màu sắc trên web. Tôi tin rằng bạn phải luôn biết những gì bạn đang làm sẽ hoạt động như thế nào và màu sắc cũng không ngoại lệ. Hãy xem xét các chi tiết kỹ thuật khi làm việc với màu sắc trên web.
Pha trộn màu sắc
Điều rất quan trọng là phải hiểu rằng việc sử dụng màu sắc trên máy tính giống như thời thơ ấu sẽ không hiệu quả do trộn màu. Khi còn nhỏ bạn đã có sơn. Sơn và mực máy in được tạo thành từ các chất màu - những hạt nhỏ trộn lẫn với nhau để tạo thành màu sắc nhìn thấy được. Đây là một sơ đồ tạo màu trừ. Bạn càng thêm nhiều màu thì màu sẽ càng đậm. Các màu cơ bản là lục lam, đỏ tươi và vàng, nhưng khi bạn trộn chúng theo cách trừ đi, bạn sẽ có màu đen.
Trên máy tính (hoặc bất kỳ màn hình nào) bạn làm việc với ánh sáng, nghĩa là khi bạn trộn tất cả các màu bạn sẽ có được màu trắng. Trước khi Isaac Newton thực hiện thí nghiệm lăng kính nổi tiếng của mình, mọi người tin rằng màu sắc được chứa trong các vật thể chứ không bị hấp thụ hoặc phản xạ từ chúng. Newton đã sử dụng lăng kính và chứng minh rằng ánh sáng rực rỡ chỉ là hỗn hợp của nhiều màu sắc, tạo ra cầu vồng. Tuy nhiên, các màu riêng lẻ của cầu vồng không còn tách biệt nữa, chứng tỏ lăng kính không chứa màu sắc. Sơ đồ như vậy được gọi là phụ gia.
Màn hình là sự kết hợp của nhiều mảnh ánh sáng nhỏ tạo thành vô số màu sắc. Độ phân giải có nghĩa là số lượng các phần này - pixel - trên màn hình. Điều thú vị là cách tiếp cận này đã được các nghệ sĩ sử dụng ngay cả trước khi màn hình ra đời (bạn có thể xem ví dụ bên dưới).
Màn hình có một số chế độ hiển thị xác định cách chúng ta cảm nhận hình ảnh. Điều này thường được gọi là độ sâu màu. Độ sâu màu quyết định số lượng màu hiển thị. Nếu độ sâu là 1 bit, chúng ta chỉ có hai màu - đen và trắng. Độ sâu hai bit cho 4 màu, v.v. lên tới 32, mặc dù màn hình thường xuyên hỗ trợ độ sâu màu lên tới 24, mang lại cho chúng ta 16.777.216 màu (True Color và kênh alpha).
Gọi như vậy là True Color vì mắt người có khả năng phân biệt khoảng 10 triệu màu và độ sâu 24 bit là đủ cho việc này. Đỏ, xanh lá cây và Màu xanh a chiếm 8 bit và những bit còn lại được sử dụng để minh bạch (kênh alpha).
Hãy lấy thông tin này và xem xét các thuộc tính màu sắc có sẵn cho chúng ta.
Giá trị màu
Giá trị RGB
Ở cuối phần trước, giữa các dòng đã nói rbga(x, x, x, y) nghĩa là gì; , tuy nhiên, đáng để hiểu rõ hơn về điều này. Nếu chúng tôi làm việc với mô hình RGB, chúng tôi chia màu thành ba kênh với các giá trị từ 0 đến 255.
X là số từ 0-255 y là số từ 0,0 đến 1,0 rgb(x, x, x); hoặc rgba(x, x, x, y); Ví dụ: rbga(150, 150, 150, 0,5);
Giá trị hex
Màu thập lục phân là định dạng hiển thị màu hơi khác một chút và được sử dụng phổ biến nhất trên web.
Như bạn đã biết, một byte có 8 bit, tức là mỗi màu thập lục phân được xác định bằng 1 byte. Mỗi byte được chỉ định bởi một số từ 00 đến FF trong hệ thập lục phân ký hiệu hoặc một số từ 0 đến 255 ở dạng thập phân. Do đó, màu đen là #000000 và màu trắng là #FFFFFF.
Nếu các bit được lặp lại theo cặp thì chúng có thể được rút ngắn, ví dụ: #00FFFF trở thành #0FF. Hệ thống ghi này rất thuận tiện cho việc hiểu và ghi chép cũng như sử dụng trong lập trình. Nếu bạn định làm việc với màu sắc ở mức độ sâu hơn, bạn nên xem xét hệ thống HSL.
Giá trị HSL
HSL hoạt động theo cách tương tự như RGB, nhưng thay vì màu sắc, nó chỉ định màu sắc, độ bão hòa và độ sáng.
Mô hình 3D HSL
Hue xoay 360 độ, độ bão hòa và độ sáng lấy giá trị từ 0 đến 1.
X là số từ 0 - 360 y là tỷ lệ phần trăm từ 0% đến 100% z là số từ 0,0 đến 1,0 hsl(x, y, y); hoặc hsla(x, y, y, z); Ví dụ: hsla(150, 50%, 50%, 0,5);
Quá trình chuyển đổi giữa hai hệ thống này rất đơn giản nhưng HSL lại phù hợp hơn với nhận thức của con người. Bản demo và công cụ này sẽ giúp bạn hiểu rõ hơn.
HSL cũng sẽ được đề cập trong một bài viết trong tương lai.
Màu sắc được đặt tên
Các màu được đặt tên cũng có sẵn cho các nhà phát triển. Tuy nhiên, chúng không dễ làm việc do sự khác biệt trong nhận thức và tính không chính xác của chúng. Một ví dụ rõ ràng là "xám đậm" nhạt hơn "xám". Thậm chí còn có một trò chơi mà bạn phải đoán màu sắc. Trước đây chẳng hạn, màu đỏ máuđược gọi là chucknorris (hiện tại tính năng này chỉ được hỗ trợ trong HTML, theo như tôi biết). Bằng cách này hay cách khác, sẽ thuận tiện và chuyên nghiệp hơn nhiều khi sử dụng các bộ tiền xử lý như Sass để lưu trữ màu trong các biến.
Biến màu
Một cách tốt là lưu trữ các biến màu nhưng không bao giờ sử dụng chúng, xác định lại chúng bằng những tên dễ đọc hơn. CSS có các biến gốc:
:root ( --brandColor: red; ) body ( nền: var(--brandColor); )
Nhưng điều này hoàn toàn tính năng mới và các trình duyệt của Microsoft không hỗ trợ nó tại thời điểm viết bài.
Bộ tiền xử lý CSS cũng hỗ trợ các biến, vì vậy bạn có thể tạo các biến như $brandPrimary và sử dụng chúng. Hoặc sử dụng bản đồ:
$colors: (thương hiệu chính: #FA6ACC, thương hiệu phụ: #F02A52, tô sáng: #09A6E4); @function color($key) ( @if map-has-key($colors, $key) ( @return map-get($colors, $key); ) @warn "Unknown `#($key)` in $ màu sắc."; @return null; ) // _comComponent.scss .element ( màu nền: color(highlight); // #09A6E4 )
Hãy nhớ rằng tên rất quan trọng. Tên trừu tượng đôi khi hữu ích vì nếu bạn thay đổi một biến được sử dụng để đặt màu xanh lam và bây giờ đặt màu cam, bạn không phải đổi tên tất cả các biến khác, hoặc tệ hơn là thêm nhận xét như « $blue bây giờ có màu cam."
màu hiện tại
currentColor là một giá trị rất quan trọng. Nó tính đến việc lồng nhau và được sử dụng để chuyển màu sang bóng, đường viền và thậm chí cả nền.
Giả sử bạn đã tạo một div và một div lồng nhau bên trong nó. Đoạn mã bên dưới sẽ tạo đường viền màu cam cho div bên trong:
Div-external ( color: cam; ) .div-internal ( border: 1px Solid currentColor; )
Điều này rất hữu ích khi làm việc với các hệ thống biểu tượng. Bạn có thể đặt currentColor làm giá trị mặc định và sau đó sử dụng các lớp CSS cần thiết để tạo kiểu.
Bộ tiền xử lý
Bộ tiền xử lý CSS rất tốt để làm việc với màu sắc. Dưới đây là một số liên kết đến tài liệu cho các chức năng khác nhau.
Hơn 125 năm trước, nghệ sĩ theo trường phái ấn tượng vĩ đại Claude Monet đã thay đổi cách hiểu của chúng ta về màu sắc bằng cách coi một yếu tố như ánh sáng. Cho đến nay, nghiên cứu của ông vẫn chưa áp dụng được vào thiết kế web. Nhưng các bộ tiền xử lý như Sass cho phép bạn nghĩ về bảng màu theo một cách mới:
Claude Monet, Haystacks: Hiệu ứng của tuyết (1891). Phòng trưng bày Quốc gia Scotland; hình ảnh cho công chúng xem.
Trong lịch sử, khả năng truyền tải màu sắc tinh tế trên web còn hạn chế và hầu hết đều dựa vào mã màu CSS được ghim tĩnh. Trong khi thao tác màu sắc" một cách nhanh chóng"vẫn không thể đạt được.
May mắn thay, các công cụ mới cho chúng ta nhiều lựa chọn hơn để làm việc với màu sắc. Nhưng CSS vẫn khá thiếu linh hoạt. Đây là nơi mà bộ tiền xử lý có thể rất hữu ích cho chúng ta. Hãy xem xét một số tính năng của chúng có thể cải thiện đáng kể phong cách của chúng ta:
- Biệt hiệu giúp chúng ta hiểu rõ hơn về màu sắc chúng ta sử dụng;
- Ánh sáng, bóng đổ và chia tỷ lệ cho phép các bảng màu linh hoạt ở độ phân giải khá cao;
- Việc pha trộn màu sắc cho phép bạn mở ra một thế giới mới với các sắc thái và tông màu tinh tế.
Mã sáu chữ số
Bạn phải biết ý nghĩa chính xác của mã màu để áp dụng chúng. Điều này có nghĩa là trừ khi bạn sử dụng tên màu đặt trước, biểu định kiểu của bạn luôn chứa đầy các mã sáu chữ số khó hiểu hoặc số HSL khó hiểu. Nhưng nếu màu chúng ta đang sử dụng không thực sự có tên thì sao? Đây là nơi Sass đến giải cứu chúng tôi. Các bộ tiền xử lý khác có thể có chức năng tương tự, nhưng tôi để bạn tự mình khám phá điều này.
Hãy bắt đầu để bạn có thể hiểu ý tôi.
Chúng ta sẽ tạo một thương hiệu mới và chọn hai màu để hiển thị nó. Điều đầu tiên tôi sẽ làm là đặt tên cho các màu: $toolbox và $ol-blue :
Hiện tôi đang sử dụng chúng để tạo trang web cho Công ty Cung ứng Du lịch Gullfoss. Ý tưởng thiết kế cho trang web này là sự liên kết với thẻ hành lý. Có nhiều lựa chọn khác nhau ở những nơi khác nhau trên trang web ( nhẹ hơn) và sắc thái ( tối hơn) những màu này:
Trang web giả định của Gullfoss Travel Supply Co.
Ví dụ, hãy xem xét nút này:
Tôi muốn nút này trông giống như một phần tử có thể nhấp vào, có thể dễ dàng đạt được điều này bằng một dải chuyển màu đơn giản. Cơ sở của nút là màu của hộp công cụ $. Và điểm nổi bật của nó là tông màu sáng hơn và tối hơn.
Theo truyền thống, tôi sẽ phải đặt chúng trong CSS như thế này:
Nút( màu nền: $toolbox; // hình nền chính: gradient(hsl(0, 33%, 52%), // sáng $toolbox, hsl(0, 41%, 39%); // tối) )
Màu sắc chính của nút là một trong các màu thương hiệu, hai màu còn lại ( sáng và tối) không phải là hằng số Sass. Tôi cần phải hỏi họ. Mở bộ chọn màu và chọn một mẫu màu theo cách thủ công. Nhưng nếu tôi muốn thêm một nút dựa trên màu $ol-blue , thì tôi cần phải quay lại bảng màu một lần nữa và chọn các giá trị mới.
Và đối với mỗi nút này, bạn vẫn cần mô tả trạng thái di con trỏ! Ở trạng thái này, tông màu sáng và tối sẽ nhạt hơn trên nút ở trạng thái bình thường nên mình sẽ phải khai báo thêm 4 hằng số. Hoặc chỉ cần nhập các giá trị cụ thể một lần và hy vọng rằng tôi sẽ không cần những màu này ở nơi nào khác.
Nhưng Sass có thể làm điều đó cho tôi. Nó chứa các hàm tích hợp để xử lý các màu này mà không cần phải đặt các biến thể khác nhau của chúng theo cách thủ công.
Đóng gói bộ chọn màu cho Sass
Một cách để làm cho màu nhạt hơn là sử dụng chức năng làm sáng:
Làm sáng ($ hộp công cụ, 20%);
Và để làm đậm màu, chúng ta có thể sử dụng hàm làm tối:
Làm tối($ol-blue, 30%);
Hãy xem xét trường hợp sau: nếu chúng ta làm sáng $toolbox 50%, chúng ta sẽ có được một phiên bản rất nhạt của màu đó. Nhưng nếu chúng ta làm sáng $ol-blue đi 50%, chúng ta sẽ có được màu trắng hoàn toàn. Bởi vì $ol-blue nhẹ hơn nhiều so với $toolbox .
Để biết chúng ta có thể làm sáng một màu đến mức nào mà nó không chuyển sang màu trắng hoàn toàn, chúng ta cần biết trước giá trị độ sáng của màu đó. Thông tin này được mã hóa thuận tiện trong các giá trị HSL. Nếu chúng ta trừ đi độ sáng của màu từ 100% thì kết quả là lượng chúng ta cần làm sáng màu để có được màu trắng hoàn toàn:
X = 100% - l
Giá trị độ sáng của $ol-blue là 60% và chúng ta có thể làm sáng nó lên tới 40% mà nó không chuyển sang màu trắng hoàn toàn. Độ sáng của $toolbox là 40%, vì vậy chúng ta có thể tăng độ sáng lên 60%:
Khi chúng ta làm sáng màu, $ol-blue sẽ chuyển sang màu trắng nhanh hơn $toolbox vì nó có giá trị độ sáng cơ bản cao hơn.
Khi chúng ta làm tối màu, $toolbox sẽ chuyển sang màu đen hoàn toàn nhanh hơn $ol-blue vì nó có giá trị độ sáng cơ bản thấp hơn.
Để làm chủ được bảng màu mới này, chúng ta cần ghi nhớ các giá trị độ sáng cho từng màu.
Bảng màu tỷ lệ với sự thay đổi màu sắc
Sass bao gồm một hàm màu sắc thang màu() cho phép bạn dịch chuyển các thành phần màu sắc theo tỷ lệ. scale-color() hoạt động với các kênh RGB cũng như độ bão hòa và độ sáng HSL. Để điều chỉnh màu sắc tương tự, bạn cần sử dụng hàm adjustment-hue() cùng tên.
Như tôi đã lưu ý trước đó, nếu chúng ta tăng độ sáng $ol-blue lên 50%, nó sẽ chuyển thành màu trắng tinh khiết, nhưng nếu chúng ta tăng độ sáng tương ứng lên 50% bằng cách sử dụng hàm tỉ lệ-color():
Màu tỷ lệ($ol-blue, độ sáng, 50%);
Điều đó sẽ tạo ra một màu có độ sáng trung gian giữa màu gốc và màu trắng tinh khiết.
Bây giờ tôi biết chính xác mình cần phải di chuyển bất kỳ màu nào của mình đến mức nào để có được màu trắng tinh khiết: nó luôn là 100%. Nếu tôi tăng độ sáng của $ol-blue lên 99% thì nó vẫn sẽ là 1 phần trăm $ol-blue. Bạn có thể xử lý $toolbox hoặc bất kỳ màu nào khác theo cách tương tự. Ngoại trừ những màu vốn đã quá nhạt và có thể chuyển sang màu trắng tinh sớm hơn rất nhiều. Đối với họ, độ sáng ban đầu sẽ là 100%.
Bạn có thể dễ dàng hiểu ý tôi bằng cách nhìn vào biểu đồ màu bên dưới:
Khi độ sáng của màu sắc thay đổi, chúng trở nên nhạt hơn và dễ đoán hơn.
Các tùy chọn màu tối hơn cũng được thiết lập tương ứng.
Với hàm tỷ lệ màu(), bạn có thể chỉ định một số lượng hằng số cơ sở có giới hạn trong bảng màu nhưng vẫn giữ được tính linh hoạt để xử lý các tông màu và sắc thái. Bây giờ khai báo gradient của chúng ta có thể được định nghĩa như sau:
Nút( màu nền: $toolbox; // hình nền chính: gradient(scale-color($toolbox, lightness: 50%), $toolbox,scale-color($toolbox, lightness: -30%);) ) nút: di chuột, nút: tiêu điểm( màu nền: màu tỷ lệ ($ hộp công cụ, độ sáng: 50%); // hình nền chính: gradient (màu tỷ lệ ($ hộp công cụ, độ sáng: 60%), tỷ lệ hộp công cụ $ -color($toolbox, độ sáng: -20%);) ) nút.secondary( màu nền: $ol-blue; // hình nền chính: gradient(scale-color($ol-blue, độ sáng: 50% ), $ol-blue, vảy-color($ol-blue, độ sáng: -30%);) ) nút.secondary:hover, nút.secondary:focus( màu nền: màu tỷ lệ($ol-blue, độ sáng: 50%), // hình nền dự phòng: gradient(scale-color($ol-blue, lightness: 60%), $ol-blue, value-color($ol-blue, lightness: -20%) ;) )
Trong ví dụ này tôi chỉ sử dụng hai hằng số và dịch chuyển chúng theo ý muốn. Trên thực tế, chúng có thể được sử dụng xuyên suốt toàn bộ trang. Nội dung trang chủ của Công ty Cung ứng Du lịch Gullfoss. Chỉ có hai màu thương hiệu được sử dụng, chuyển sang các giá trị độ sáng khác nhau. Mặc dù bảng màu đơn giản nhưng chúng ta có thể tùy chỉnh nó một cách linh hoạt.
Quy định màu sắc bằng cách sử dụng phụ gia
Có một cách khác để bạn có thể tạo các bảng tỷ lệ tương tự - hàm mix().
Nếu chúng ta muốn làm sáng $ol-blue đi 60 phần trăm, chúng ta sẽ viết:
Hỗn hợp(trắng, $ol-blue, 60%)
Bạn có thể hình dung nó như thể chúng ta trộn một ống sơn trắng với một ống sơn màu. $ol-xanh. Nếu chúng ta muốn làm tối $ol-xanh, Chúng tôi sẽ viết:
Trộn(đen, $toolbox, 30%)
Hóa ra việc trộn lẫn với màu trắng hoặc đen được coi là giống như việc thay đổi độ sáng của một màu, nhưng sẽ thuận tiện hơn vì chúng ta cần gõ ít ký tự hơn. Mix() cũng sẽ giúp bạn dễ dàng tạo giao diện trang web mà trước đây không có.
Hãy xem xét những bức vẽ về đống cỏ khô của Monet. Họ nắm bắt được trò chơi của ánh sáng một cách tuyệt vời. Nhưng từ góc độ thiết kế, chúng ta có thể học được một bài học hữu ích từ họ. Theo một nhà ấn tượng người Pháp khác, Pierre Bonnard, " Màu sắc không tạo ra ấn tượng dễ chịu về bức tranh - nó làm nổi bật nó“Hãy nhớ màu sắc của ánh sáng ảnh hưởng như thế nào đến vẻ ngoài của đống cỏ khô của Monet. Điều gì sẽ xảy ra nếu chúng ta có thể lấy màu cơ bản và dễ dàng thay đổi chúng trong thiết kế, như ông đã làm vào năm 1890?
Hàm Sass mix() mang đến cho chúng ta cơ hội này. Hãy lấy lại bảng màu của chúng ta và thêm một vài màu bổ sung vào đó: ánh sáng và bóng tối. Bây giờ, hãy kết hợp lại các màu thương hiệu của chúng ta, nhưng thay vì trộn chúng với màu đen và trắng, hãy sử dụng các màu mới:
Ngay lập tức toàn bộ bảng màu trở nên ấm áp và mềm mại, còn các màu tối hơn trở nên phong phú và tươi sáng.
Làm sáng bằng màu vàng mang lại cho toàn bộ bảng màu những sắc thái nắng.
Làm tối bằng màu bóng làm cho bảng màu tự nhiên hơn.
Nếu không thích thiết kế này, tôi có thể chọn giá trị mới cho 2 hằng số này, lần sau Sass sẽ biên dịch chúng thành CSS và thiết kế sẽ tự động phản ánh những thay đổi.
Trong kế hoạch mới này, tôi lại bắt đầu với bảng màu tương tự của thương hiệu, nhưng bây giờ tôi chọn màu hồng đậm cho tông màu sáng và xanh đậm cho tông màu tối:
Điều này thay đổi hoàn toàn giao diện của bảng màu nhưng vẫn dựa trên hai màu chính của thương hiệu chúng tôi.
Việc thay đổi tông màu sáng và tối sẽ tự động được phản ánh trong bảng màu khi Sass biên dịch CSS.
Các tông màu sáng và tối có thể được thay đổi để tạo tâm trạng hoặc chủ đề phù hợp cho trang web của bạn mà không cần chúng tôi phải thực hiện các thay đổi tốn thời gian đối với tất cả các kiểu.
Quay lại trang web của Công ty Cung ứng Du lịch Gullfoss. , trên trang của mỗi nhãn dán, tôi đã trình bày một số khả năng mà việc trộn màu như vậy mang lại cho chúng ta. Nếu chúng ta nhìn vào trang của Olympia, không khí hoàn toàn khác với trang chủ, nhưng tất cả bố cục, phông chữ và bố cục cơ bản vẫn giống nhau. Mỗi màu được pha một tông vàng nhạt hoặc một tông tím đậm nên ta thấy trang ( theo đúng nghĩa đen) dưới một ánh sáng mới. Nền của nội dung đã trở thành màu vỏ trứng và " Thêm vào giỏ" - màu sắc rực rỡ tự nhiên hơn:
Nhãn dán Lincoln có rất nhiều tông màu nền và sắc đỏ trong đó, vì vậy tôi muốn điều đó được phản ánh xuyên suốt các thành phần của trang. Tôi chọn tông màu sáng và tối màu đỏ để phù hợp với thiết kế với hình minh họa:
Nếu bạn nhìn vào trang này để tìm Hồ bơi Barton Springs, bạn sẽ thấy nó bị chi phối bởi tông màu của nước mát và lá xanh. Sự khác biệt giữa màu gốc và màu mới khá tinh tế nhưng đáng chú ý. Màu sắc cần được kết hợp một cách gắn kết để tạo nên tính thẩm mỹ giúp nâng tầm thiết kế:
Nếu bạn cần " kịch", thì trang Grid phù hợp với bạn. Các sắc thái sáng và tối mang lại phong cách điện ảnh" Ngai vàng"Sự thay đổi mạnh mẽ như vậy đạt được chỉ bằng cách thay đổi một vài hằng số.
Một vài điều nữa giúp bạn thiết kế bảng màu của riêng mình
Hầu hết mọi màu sắc trên các trang này đều được pha trộn với các sắc thái sáng hoặc tối, nhưng đôi khi các yếu tố thiết kế có thể trông quá đồng nhất và do đó chúng hòa trộn với nhau. Trong những trường hợp như vậy, đừng ngại bổ sung cho dự án của bạn một bộ vòi màu mới. Điều này sẽ giúp trang của bạn có màu sắc nổi bật và khiến chúng trông rực rỡ hơn.
Chúng ta hãy nhìn lại trang của Lincoln. Hãy nhớ rằng, tôi muốn tạo cho nó một tông màu đỏ. Thật khó để đọc văn bản trên nền đỏ tươi, vì vậy tôi đặt màu sáng theo cách mới; gần như có màu đỏ thuần. Sau đó tôi đặt làm nền màu xanh lá cây. Màu xanh kết hợp với màu đỏ tạo nên hiệu ứng hình ảnh, làm cho tông màu sáng có vẻ đỏ đậm hơn trong khi vẫn duy trì độ tương phản. Các lớp riêng biệt này sử dụng các tông màu sáng và tối khác nhau tương tác với nhau.
Trong quá trình phát triển cách phối màuĐiều quan trọng là đảm bảo chúng rõ ràng và dễ đọc. Hãy nhìn lại trang Lưới. Nếu bạn nghĩ rằng nó không dễ đọc lắm, bạn không đơn độc. Menu ở đầu trang có tỷ lệ tương phản thấp. Theo khuyến nghị của WCAG, nó giá trị tối ưu 4,5:1, nhưng không thấp hơn 2,6:1! Tỷ lệ tương phản thích hợp giữa màu văn bản và màu nền sẽ làm cho thiết kế trở nên đẹp mắt hơn.
Trước khi kết thúc, tôi muốn xem xét ngắn gọn về sự hỗ trợ của trình duyệt. Tất cả quá trình xử lý màu được biên dịch thành các khai báo màu CSS cơ bản, tất cả được dịch thành các khai báo tĩnh mà tất cả các trình duyệt hiện nay đều hỗ trợ. Bộ tiền xử lý mang đến cho chúng ta những cơ hội chưa từng có để tạo ra các sắc thái và tông màu giúp nâng cao bảng màu của chúng ta và làm nổi bật Monet bên trong chúng ta.
Dịch bài viết" Trộn màu cho web với Sass» được chuẩn bị bởi đội ngũ thân thiện của Dự án Xây dựng Website từ A đến Z.
Đôi khi khi thiết kế trang web, đôi khi bạn cần “ẩn” những thành phần cụ thể. Tất nhiên, bạn có thể chỉ cần xóa các phần tử này khỏi đánh dấu HTML. Nhưng đây không phải là một lối thoát. Để giữ một phần tử nhưng ẩn nó, bạn phải sử dụng CSS hoặc HTML ẩn.
Căn dọc CSS không phải là tốt nhất nhiệm vụ đơn giản. Điều phức tạp là với những yêu cầu ngày nay về thiết kế thích ứng Vì các thiết bị khác nhau các nhà phát triển phải tạo ra các phần tử có chiều cao "linh hoạt" và việc tính toán tâm dọc trở thành một nhiệm vụ khá khó khăn.
Hãy chuyển sang một chủ đề thú vị và sâu rộng khác - cách sử dụng Sass/Compass để giúp cuộc sống của bạn dễ dàng hơn khi làm việc với màu sắc trong quá trình bố cục.
Mọi nhà thiết kế bố cục đều biết rõ tần suất mình phải xác định và thao tác màu sắc trong mã CSS trong quá trình bố cục. Bộ tiền xử lý Sass và thư viện La bàn của nó có một bộ hàm phong phú được thiết kế cho tất cả các loại thao tác màu trong mã SCSS.
Bài viết này là tổng quan về các tính năng màu Sass và Compass. Hãy bắt đầu, như thường lệ, với chức năng đơn giản nhất và di chuyển suôn sẻ từ đơn giản đến phức tạp.
Thiết lập dự án la bàn ban đầu
Trước tiên, hãy tạo một dự án Compass trống và định cấu hình nó. Khởi tạo một số biến
| 1 | $màu |
| 1 | $color1 |
Chức năng làm sáng và làm tối
Hãy bắt đầu với nhiều nhất chức năng đơn giản -
làm sáng màu gốc và chức năng . Đối số thứ hai là giá trị phần trăm để làm sáng hoặc làm tối màu gốc: .lighten ( nền-color : làm sáng ($ color , 10% ); . làm tối ( nền-color : làm tối ($ color , 10% ); )Các chức năng làm sáng và làm tối có thể được sử dụng ở bất cứ đâu trong mã SCSS - bất cứ nơi nào màu được áp dụng. Ví dụ: hãy sửa đổi ví dụ hiển thị ở trên. Hãy sử dụng các chức năng làm sáng và làm tối để thay đổi phông chữ, đường viền và màu nền:
.mixin (cỡ chữ: .95rem; màu nền: làm sáng($color, 20%); đường viền: 1px làm tối đậm($color, 30%); màu: làm tối($color, 60%);)
Hãy chuyển sang chức năng chuyển đổi màu nghịch đảo. Chức năng đầu tiên
với màu sắc được chỉ định trong đó. Hãy chuyển điều này đi biến hàm. Nằm 180 độ so với màu gốc. . Nó cũng đảo ngược màu sắc từ màu gốc. Nhưng chức năng là nó đảo ngược màu sắc (đỏ, lục, lam), nhưng trong suốt - nó đảo ngược màu gốc. Nhưng không giống như cái sau, nó có tính linh hoạt cao hơn. Liệu chức năng này có thể kiểm soát mức độ vị trí của “màu đầu ra” hay không.Nói cách khác, bạn có thể chỉ định một góc khác 180 độ. Ngoài ra, giá trị góc có thể là dương hoặc âm:
.điều chỉnhhue_plus ( màu nền : điều chỉnh màu sắc ($ màu , 80deg ); . adjustmenthue_minus ( màu nền : điều chỉnh màu sắc ($ màu , -80deg ); )
Bộ tiền xử lý Sass có một số chức năng để kiểm soát độ bão hòa màu.
: .desaturate ( màu nền : desaturate ($ color , 80% ); )... ngược lại, nó làm giảm độ bão hòa màu so với bản gốc.
| 1 | làm trong suốt |
Giá trị trong suốt có thể nằm trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn mờ):
.transparentize ( nền-color : trong suốt ($ color , .2 ); ) : .fadeout ( nền-color : mờ dần ($ color , .2 ); )
| 1 | mờ dần |
Chức năng chuyển đổi màu gốc sang thang độ xám cực kỳ dễ sử dụng. Về nguyên tắc, không có gì đặc biệt để kể ở đây:
.grayscale(background-color:grayscale($color);)
Nếu nhiệm vụ là chuyển đổi màu gốc (được chỉ định dưới dạng biến, ở định dạng HEX hoặc HSLA) sang định dạng RGBA, thì trong trường hợp này, hàm sẽ ra tay giải cứu
và có hai đối số biến (hai màu). Đối số thứ ba cuối cùng, ở dạng phần trăm, chỉ định tỷ lệ mà một màu sẽ được trộn với màu kia. Trong trường hợp của chúng tôi, màu sắc.
chức năng điều chỉnh màu sắc
Bây giờ chúng ta đến với các hàm phức tạp hơn Bộ tiền xử lý Sass. Chức năng đầu tiên trong số này là
Kiểm soát kênh alpha màu (độ trong suốt) cũng có sẵn. , - giá trị từ 0 đến 359 độ, biểu thị màu trên sơ đồ HSL; giá trị có thể dương hoặc âm;Lý thuyết thế là đủ rồi, chúng ta hãy xem cách hoạt động của hàm điều chỉnh màu bằng các ví dụ.
- Thay đổi màu sắc từ bản gốc; đối số thứ hai thiết lập sự thay đổi màu sắc thông qua một biến
:1 $hue
- Thay đổi màu sắc và độ sáng cùng một lúc. Đối số đầu tiên $color đặt màu ban đầu, đối số thứ hai đặt màu $hue, đối số thứ ba đặt thay đổi về độ sáng $lightness:
- Thay đổi đồng thời hai kênh màu cho mô hình màu RGB. Chức năng, kênh xanh
:1 $ xanh
- Trộn các đối số mô hình màu sắc RGB và HSL trong chức năng điều chỉnh màu sắc. Chúng ta hãy chuyển hàm điều chỉnh màu các đối số của màu gốc $color, đối số kênh màu đỏ $red của mô hình RGB và đối số $hue của mô hình HSL:
Do biên dịch mã này thành CSS, chúng tôi gặp lỗi sau:
Lỗi cú pháp: Không thể chỉ định cùng lúc giá trị HSL và RGB cho một màu cho ` adjustment-color " trên dòng 38 của .../ sass/style .scss... có nghĩa là trong hàm
đã thực hiện thay đổi màu dựa trên giá trị của các đối số được truyền cho nó. Chức năng| 1 | màu tỷ lệ |
TRONG trong ví dụ này chức năng
. Chức năng. Giá trị tính toán độ sáng hóa ra lại nhẹ hơn kết quả của hàm và| 1 | màu sắc |
| 1 | $màu |
| 1 | 30% |
Phần kết luận
Điều này kết thúc việc xem xét các chức năng “màu sắc” của bộ tiền xử lý Sass và thư viện Compass. Tóm lại, chúng ta có thể nói rằng nhờ các chức năng như vậy, công việc khi bố trí thiết kế trang web được đơn giản hóa và tăng tốc.
Hơn nữa, với sự trợ giúp của các chức năng này, chỉ với một màu làm giá trị đầu vào, bạn có thể tạo ra một thiết kế xuất sắc trong bảng màu chuyên nghiệp. Và không dùng đến bất kỳ công cụ đồ họa nào.
Ngoài việc sử dụng riêng từng hàm màu được thảo luận ở trên, bạn có thể kết hợp chúng thành một biểu thức, tạo ra các thiết kế khá phức tạp.
Bài viết này là bản dịch miễn phí của chương “Điều khiển màu sắc một cách dễ dàng” trong cuốn sách tuyệt vời “Sass and Compass for Designers” của Ben Frain.
