Работа с ключевыми словами цветов в CSS

Работа с ключевыми словами цветов в CSS

От автора: ключевые слова цветов – один из двух старейших методов присвоения цвета на веб-страницах, который до сих пор крайне полезен в веб-дизайне и разработке. Всего в CSS 149 именованных цветов, которые вызываются по различным ключевым словам (посмотреть можно в демо к уроку, там же есть эквиваленты этих цветов в шестнадцатеричной системе счисления). У именованных цветов есть пара особенностей.

Во-первых, в CSS применяются как ключевые слова цветов, так и другие системы цветов. К примеру, ключевые слова можно использовать, чтобы задать фон для тега body при помощи стилей по ссылке на файл, ограниченных стилей или встраиваемых стилей:

body {
    background-color: tomato;
}

По большей части CSS регистронезависим. Это означает, что ключевые слова можно писать в верхнем регистре (BLACK), нижнем (black) и смешанном. Для большей ясности и читаемости предпочтителен нижний регистр.

Глядя на картинку выше, можно заметить, что в ключевых словах используются как американизмы, так и нормальные слова gray и grey, и цвет у них один и тот же. Тем не менее, в IE со словом grey возникают проблемы, оно отрисовывается зеленым цветом. По этой причине лучше всегда использовать gray.

transparent – специальное ключевое слово. С технической точки зрения оно относится не к hex цветам, а к RGB значению 0 alpha, а точнее rgb(0, 0, 0, 0). Значение transparent подходит везде, где можно прописать цвет, но чаще всего его используют в градиентах и рамках. В демо выше ключевое слово transparent я записал для ясности в восьмизначной форме по аналогии с hex цветами.

rebeccapurple – самое молодое ключевое слово в CSS. Ключевое слово появилось в честь Ребекки Майер. Ее отец Эрик Майер постоянно вносит что-то новое в стандарты CSS. Смерть Ребекки в шестилетнем возрасте потрясло все сообщество. В ее честь в спецификацию был добавлен цвет rebeccapurple, который поддерживается во всех последних версиях браузеров.

Возможные недостатки

У ключевых слов есть несколько возможных недостатков, о которых вам стоит знать:

Ограниченная выборка цветов. При помощи ключевых слов можно выбрать только те цвета в CSS, у которых есть имя.

Их нельзя настроить. В отличие от HSL, RGB или даже hex цветов, цвета по ключевым словам нельзя сделать светлее или темнее.

Сложно запомнить имена цветов. black, white и red запомнить легко, а вот darkgoldenrod не очень.

Не всегда прослеживается логика. Вы могли заметить, что darkgray на самом деле светлее, чем просто gray, и все это из-за исторического анахронизма. Точно так же darkslategrey больше зеленый, чем серый.

Неправильное написание может привести к неожиданным результатам. Браузер пытается перевести неизвестное ключевое слово в hex систему, что может привести к генерации совсем другого цвета. Произвольные слова также могут генерировать цвета. К примеру, <body bgcolor=»chucknorris»> превращается в красный цвет.

Обратите внимание, что для изменения цвета никогда нельзя использовать инлайновые атрибуты. Делайте это через CSS. Тем не менее, в сети до сих пор полно примеров данной практики.

Подводя итог на основе возможных минусов, я, как правило, использую ключевые слова при прототипировании, а после доделки дизайна перехожу на HSL. Описанные выше проблемы можно решить:

В Sass можно создавать свои ключевые слова цветов. Я создал свою систему цветов (The New Defaults) с более натуральными и простыми для запоминания именами.

В Sass также можно делать цвета светлее и темнее (в том числе и по ключевым словам).

Если вы хотите запомнить ключевые слова CSS цветов, то специально для вас Крис Гайлман создал игру по подбору цвета по ключевым словам.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree