CSS от А до Я как использовать свойство color


Содержание материала:

Как использовать CSS

Каскадные таблицы стилей (CSS) — язык описания внешнего вида веб-документа.

Чтобы статья не была утомительной, пробегусь тезисами по основным моментам. Итак, стиль страницы можно подгружать как из отдельного файла с помощью тега link так и с помощью тега style (для Blogger — в шаблоне ) или атрибута style, которым не рекомендуется злоупотреблять, поскольку это усложняет поиск нужного фрагмента для корректировки и ведёт к повышению времени загрузки страницы в браузере, то есть стили желательно прописывать до

Стили выполняются в том же порядке, в котором читаются: сверху вниз, слева направо. Например,

id в отличии от class нельзя использовать два раза

Контекстные селекторы (второй пример)

Есть ли различия между этими двумя вариантами?

Каковы различия между

Аналогично с псевдоклассом :hover (изменения производятся при наведении мышки).

Между ними нет различия.

Стили применяются только для тега с определённым атрибутом.

Если свойство состоит из нескольких параметров, то разделять их должны пробелы.

Все свойства заканчиваются точкой с запятой (;).

Комментарии в CSS выглядят иначе, нежели в HTML.

В тег . ]]>

Продолжение на странице про селекторы.

12 комментариев:

Добронрава Эх. китайская грамота( Найти бы время во всём разобраться, Наташа, спасибо за всякие нужности и полезности! NMitra Единственный способ — желание что-нить сотворить, а там уж и знания подтянуться.

Про упорство промолчу, поскольку не мне говорить об этом качестве автору плюшевых медвежат 🙂 Александр Наташа,нужна помощь,заплачу только помогите! минимально «подрихтовать» Блог,или подскажите что можно сделать,только доступно для Юзера

Вот мой блог: http://ok-glworld.blogspot.com/2012/03/blog-post_12.html

Нужно убрать оранжевые полосы с двух сторон банера(появились после вставки банера,банер делал так:забрасывал анимацию на фотохостинг а далее поставил через HTML/Javscript ссылку),мне советовали через Фотошоп,сделать фон,потом как то вставить,но я врядли смогу,т.к. навыков особых владения Фотошоп — нет,мне кажется есть другой вариант исправить ошибку,но какой вот собствено и вопрос.Ещё раз повторюсь,если это сложно,помогите заплачу!
Надеюсь на вразумительный ответ.Мир не без добрых людей!
Заранее спасибо!

С ув.Александр NMitra Уберите баннер, я хоть посмотрю что вы хотите добиться в конечном результате. Если я правильно поняла, то он является всему причиной. Александр Да именно Наталья,сейчас уберу. Александр Убрал,посмотрите как можно его вставить оратно но чтобы без полос NMitra Баннер попробуйте добавить сразу над сообщением (оно подвинется вниз) либо сразу после заголовка, но не в поле между ними. Анонимный Здрасьте! Не подскажите как с помощью КСС сделать так, чтобы одна ссылка находилась слева строки, а другая справа? Я в коде пытался делать через тег «р» и align, но получается, что обе ссылки находятся на разных строках, а мне ннужно, чтобы они находились на одной строке. 2 ссылки это — название ярлыка и количество комментов под каждым постом на главной странице. Пытался через CSS сделать, но вообще ничего не выходит. Я в КСС еще нуб, поэтому особо не знаю.

В коде шаблона строка, отвечающая за отображения комментов, «post-comment-link». Вставляю туда любой тег, который служит для выравнивания, а они все переносят ссылку на строчку ниже. Уже 2 часа мучаюсь над этим. Делаю методом тыка)). Ведь некрасиво, когда теги слева на одной строке, а комменты справа, но на строчку ниже. Какой-то бред получается. Анонимный Все, нашел уже! Есть аж целых 3 способа как это сделать. Могу кинуть ссылку на статью, если кому интересно. NMitra Я бы так сделала http://shpargalkablog.ru/2013/07/left-right-css.html Александр Александрович Подскажите пожалуйста, как блок этот поднять выше в «белую» область. Заранее спасибо! http://mepic.ru/view/? > NMitra Не поняла что и куда нужно поднять. Пробуйте так http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-vertikal

.site-content <
margin: -50px 0 0px;
>

Свойство color

Cвойство color определяет цвет текста элемента. Дополнительно, это свойство используется чтобы косвенно установить значение ключевого слова (currentColor) для любых других свойств, которые принимают цветовые значения. Если ключевое слово ‘currentColor’ используется, чтобы установить цвет непосредственно для свойства ‘color’, то оно трактуется как наследование цвета, т.е: ‘color: inherit’.

Допустимые значения

  • Численное представление цветов
    • CSS2 CSS3 RGB формат — rgb(r, g, b)
      • шестнадцатиричная запись — #RRGGBB
      • шестнадцатиричная запись (сокращенная) — #RGB
    • CSS3 RGBa формат — rgba(r, g, b, a)
    • CSS3 HSL формат — hsl(h, s, l)
    • CSS3 HSLa формат — hsla(h, s, l, a)
  • Ключевые слова
    • CSS3 currentColor
    • CSS2 CSS3 transparent — полностью прозрачный цвет, сокращенная запись для прозрачного черного rgba(0,0,0,0).
  • Именованные цвета
    • CSS2 CSS3 Базовые названия цветов: aqua, black, blue, fuchsia, gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебряный), teal (зеленовато-голубой), white (белый), и yellow (желтый))
    • CSS3 Расширенные названия цветов: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorch >CSS2 CSS3 Системные цвета: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText
    • Системные цвета (браузеры на движке Gecko): -moz-ButtonDefault, -moz-ButtonHoverFace, -moz-ButtonHoverText, -moz-CellHighlight, -moz-CellHighlightText, -moz-Combobox, -moz-ComboboxText, -moz-Dialog, -moz-DialogText, -moz-dragtargetzone, -moz-EvenTreeRow, -moz-Field, -moz-FieldText, -moz-html-CellHighlight, -moz-html-CellHighlightText, -moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow, -moz-mac-chrome-active, -moz-mac-chrome-inactive, -moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover, -moz-MenuHoverText, -moz-MenuBarText, -moz-MenuBarHoverText, -moz-nativehyperlinktext, -moz-OddTreeRow, -moz-win-communicationstext, -moz-win-mediatext
    • Системные цвета (браузеры на движке WebKit):-webkit-activelink, -webkit-focus-ring-color, -webkit-link, -webkit-text

Свойство color относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение по спецификации CSS уровень 2.1, и ‘currentColor’ по спецификации CSS уровень 3. На данный момент свойство поддерживается во всех основных браузерах.

color

Поддержка браузерами

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство color устанавливает цвет переднего плана элемента. К переднему плану элемента относится текст и элементы декорирования текста (всё, что устанавливается свойством text-decoration).

Не смотря на то, что свойство color устанавливает цвет текста, оно так же влияет на цвет рамки, устанавливаемый по умолчанию, то есть, если для рамки не будет явно указан какой-либо цвет, то она будет иметь тот же цвет, что установлен для текста.

Если требуется явно задать цвета рамки, то нужно использовать свойство border-color.

Расширенное наследование цвета с помощью переменной currentColor

Если вы работаете с Sass или LESS, то, вероятно, вы уже используете переменные в своих стилях и знаете, чем они хороши. Если вы не используете препроцессор, вам может быть интересно, почему столько разговоров вокруг переменных и чем они полезны. В этой статье, мы рассмотрим, чем полезны переменные, и познакомимся с одной конкретной переменной: currentColor.

Чем хороши переменные?

Переменные в CSS полезны тем, что они помогают придерживаться принципа разработки DRY (Don’t Repeat Yourself — «не повторяйся»). Особенно полезны они в крупных проектах, которые содержат большое число повторяющихся значений.

Один из наиболее популярных случаев использования переменных — это цветовые схемы / темизация приложения. С использованием переменных создавать и поддерживать цветовые схемы в CSS становится намного проще. К примеру, цветовая схема как правило требует использования определенного цвета в нескольких свойствах. Если вы захотите изменить базовый цвет темы, вам нужно будет изменить все вхождения данного цвета в таблице стилей. С помощью переменных, вы можете определить значение в одном месте (например, в переменной «primary-color») и использовать эту переменную в таблице стилей. Если спустя какое-то время вам захочется изменить этот цвет, нужно будет изменить значение этой переменной, и все значения изменятся автоматически.

В CSS2.1 не было переменных (хотя это не совсем правда, как вы увидите в этой статье). В 2014 году появились нативные переменные CSS, которые в целом похожи на переменные препроцессоров. Эти переменные возможно даже более функциональные, чем переменные препроцессоров. Переменные CSS могут использоваться в качестве значения во всех свойствах.

В дополнение к переменным в CSS появилось новое ключевое слово, которое практически аналогично переменной: currentColor.

Ключевое слово currentColor

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

Далее в примерах показаны свойства, принимающие currentColor в качестве значения.

Другое отличие между currentColor и переменными CSS в том, что вы не можете присвоить currentColor значение. Значением currentColor является текущий цвет элемента, т.е. текущее значение свойства color. Название currentColor в этом случае отражает суть.

Так, если мы вернемся к предыдущему примеру, currentColor устанавливает цвет тени таким же, как текущее значение свойства color. Если для элемента не задано свойство color, оно будет наследоваться от родителя. Если ни у одного из родителей не задано свойство color — будет использоваться значение по умолчанию, в большинстве браузеров это черный цвет.

Другими словами: ключевое слово currentColor позволяет в свойствах элементов наследовать значение свойства color.

Для свойств, которые уже наследуют значение свойства color, ключевое слово currentColor не будет полезно.

Свойства и элементы, которые наследуют значение color по умолчанию

Если элемент имеет явно заданное или унаследованное свойство color, некоторые свойства наследуют это значение по умоланию.

Например, границы элемента. Даже если вы не укажете цвет границы, она будет иметь такое же значение, что и свойство color. Если для элемента не определено свойство color, в большинстве браузеров будет использоваться черный цвет.

В примере ниже цвет границы должен иметь значение «purple»:

Следующие свойства наследуют значение свойства color по умолчанию:

  • Цвет текста элемента
  • Значение свойства outline
  • Цвет границы
  • Значение свойства box-shadow
  • Цвет атрибута alt элемента img. Если изображение не может быть отображено, выводится текст, заданный в атрибуте alt.
  • Цвет буллетов и границы элементов списка
  • В некоторых браузерах (например, в Chrome) цвет границы элемента

Если для этих свойств явно не задать значение цвета, он будет наследоваться от значения свойства color.

Ниже представлено демо, показывающее, как элементы наследуют свойство color, заданное у элемента . Измените значение свойва color у элемента , чтобы убедиться, что цвет этих элементов изменится.

Здесь может возникнуть вопрос: если многие свойства уже наследуют значение свойства color, то как и где может использоваться currentColor?

Расширенное наследование цвета с помощью currentColor

Есть ряд случаев, когда может пригодиться получение значения свойства color. Один из примеров, когда значение свойства color не наследется по умолчанию — это градиенты. Линейный и радиальный градиенты CSS не наследуют свойство color. В помощью currentColor вы можете создать градиент, использующий основной цвет темы.

Такой пример был создан Скотом Келлумом, который взял за основу эту концепцию и пошел немного дальше, добавив анимацию. Т.к. анимируется свойство color, все свойства, наследующие color, также анимируются. Посмотреть пример Скотта Келлума можно на CodePen.

Это отличный пример использования currentColor.

Тем не менее, есть более практичные варианты использования currentColor. Давайте рассмотрим некоторые из них.

Случаи использования currentColor

Использование currentColor для темизации компонентов UI

От предыдущего примера, мы можем перейти к более практичному (и блестящему, надо сказать) примеру, продемонстрированному Саймоном «Simurai» в прошлом году на CSSConf. Доклад был посвящен тому, как использовать flexbox, currentColor и em в компонентах UI, чтобы быстро стилизовать все приложение прямо в браузере.

Чтобы продемонстрировать полезность currentColor, Саймон создал набор элементов интерфейса, включая несколько слайдеров. Эти элементы имели некую цветовую схему. В качестве цвета слайдеров и полей ввода использовалась переменная currentColor.

Пример использования currentColor для слайдера

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

Изображение ниже показывает это в действии. Саймон, используя инструменты разработчика в браузере, чтобы изменить значение свойства color, получил наглядную демонстрацию изменения компонентов интерфейса.

Изменение значения свойства color обновляет цвет всех компонентов UI, наследующих это свойство, с помощью переменной currentColor.

Используя возможности devtools, вы можете изменить тему, как вам нравится, и сохранить результат из браузера. Подробнее можно почитать в блоге Саймона.

Топ-пост этого месяца:  Дизайн изнутри вместе с CSS значением min-content

Использование currentColor для темизации и стилизации SVG

Возможности SVG велики, но они имеют некоторые ограничения стилизации, в зависимости от того, как вы их используете. Один из таких случаев — повторное использование частей SVG с помощью элемента .

Если вы не знакомы с элементом , можно почитать подробнее о нем здесь . Идея элемента заключается в повторном использовании части SVG где угодно на странице. Использование элемента похоже на копирование элемента в графическом редакторе, за исключением того, что копии остаются связанными, т.е. изменение оригинала приводит к изменению копии.

Часто элемент используется при создании SVG-спрайтов . SVG содержит иконки и используется как спрайт, мы можем вставлять иконки на странице используя . Подробнее о SVG спрайтах можно почитать в статье .

Когда SVG вставляется с помощью элемента , его содержимое копируется и содержится в shadow DOM. Это значит, его нельзя выбрать и стилизовать с помощью CSS. Это одна из причин того, почему SVG иконки используются так ограниченно.

Мы можем обойти это ограничение, указав в качестве значения currentColor, таким образом он как бы «просочится» внутрь SVG.

Рассмотрим пример SVG-иконки:

Допустим, иконка #home будет содержать что-то вроде этого:

Значение свойства color для элемента #roof будет наследоваться от родителя, т.к. для элемента #roof не задано другое значение, а атрибут fill элемента #bottom также будет наследоваться от родителя, т.к. в качестве его значения использовался currentColor.

Фабрис Вайнберг написал статью об этой технике в своем блоге на Codepen .

Пользоваться этой техникой удобно, когда вы хотите создать несколько иконок, каждая из которых имеет свой цвет; все, что вам придется сделать в этом случае — изменить значения color и fill в CSS. Пример, который Фабрис демонстрируем в своем посте:

See the Pen Sass SVG Icons 1.1KB by Fabrice Weinberg (@FWeinb) on CodePen.

Конечно, вы можете использовать currentColor для нескольких элементов внутри SVG. Однако, как вы, наверное, уже заметили, эта техника позволяет изменять только два цвета внутри SVG.

Если вы хотите иметь больше контроля над цветами и указывать дополнительные цветовые значения — вам потребуется больше переменных; как раз здесь пригодятся переменные CSS. Вы можете прочитать больше об этом здесь .

Заключение

В примерах выше мы рассмотрели, как можно использовать currentColor для того, чтобы управлять цветом, который используется в нескольких местах, и меть возможность задавать его в одном месте. Это помогает писать более компактный, поддерживаемый CSS. Особенно в ситуациях, подобных примеру Саймона с UI компонентами.

С помощью переменных CSS вы можете определить свой собственный набор переменных и использовать их в гораздо большем количестве случаев, чем currentColor, т.к. они принимаются в качестве значения любыми свойствами CSS, а не только теми, которые требуют цвет в качестве значения. Опять же, если вы уже используете препроцессор — вы знаете, как полезны переменные.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

CSS от А до Я: как использовать свойство color

Работать с цветами в вебе можно множеством способов. Думаю, полезно понимать механизмы того, с чем мы работаем, и цвет — не исключение. Давайте пороемся в некоторых технических подробностях цвета в вебе.

Цветосмешение

При работе с цветом очень важно понимать, что привычные еще с детства подходы к цветам не работают в компьютере из-за смешения цветов. В детстве мы работали с краской. В красках и чернилах из принтера есть маленькие частички — пигменты, которые смешиваются между собой и отражают свет, чтобы представить цвет глазу. Это субтрактивное (от англ. subtract — вычитание) цветосмешение. Чем больше цветов вы добавляете, тем темнее становится результат, пока не получится коричневый цвет. Основные цвета близки к тому, к чему вы привыкли: красный, желтый, синий. Но если смешать их при субтрактивном цветосмешении, вы придете к коричневому.

На компьютере (или любом мониторе) мы работаем со светом. Что значит, что если перемешать все цвета, они дадут белый. До знаменитого эксперимента Исаака Ньютона с призмой считалось, что цвет заключен в объектах, а не отражается и поглощается объектами. Исаак Ньютон с помощью призмы доказал свою теорию, что солнечный или любой яркий белый свет — на самом деле несколько цветов, благодаря призме разделив цвета и получив радугу, а затем попытавшись еще раз разделить с помощью призмы синий цвет. Синий цвет не разделился, показав, что цвет не содержался в призме, а призма разделила свет. Это значит, что при аддитивном (от англ. add — сложение) цветосмешении — том типе цветосмешения, что получается у вас на мониторе — из красного, зеленого и синего можно получить все цвета, или rgb. При таком цветосмешении красный и зеленый дают желтый.

Аддитивное и субтрактивное цветосмешение

Мониторы — это множество комбинаций из маленьких частичек света,собранных вместе и работающих синхронно, чтобы получить огромную массу цветов. Разрешением называют количество отдельных цветовых точек — пикселей — содержащихся в экране. Задолго до мониторов частоту света так использовали художники. Сёра́ и пуантилисты создавали желтый с помощью красного и зеленого в картинах наподобие «Гранд-Жатт» (хотя сам Сёра предпочитал термин «хромолюминаризм», а другие называли это дивизионизмом). Этот стиль живописи вырос из убеждения, что оптическое смешение порождает в глазах более чистый резонанс, чем традиционное субтрактивное цветосмешение пигментов.

Мониторы выпускаются с несколькими разными режимами отображения, из-за которых мы по-разному воспринимаем цвета на них. Мы называем это термином «глубина цвета в битах». Количество цветов, которое можно отобразить одновременно, определяется этой глубиной цвета. При глубине цвета 1 бит мы можем получить два цвета, или монохромное изображение. Глубина цвета 2 бита дает 4 цвета, и так далее вплоть до 32-битной глубины, хотя обычно у мониторов, используемых для веба, бывает 24-битная глубина цвета и 16 777 216 цветов (True Color) с альфа-каналом.

Мы называем это «True Color», потому что человеческий глаз различает до 10 миллионов отдельных цветов, так что 24-битной глубины для этого заведомо достаточно. Из этих 24 бит 8 выделены для красного, зеленого и синего. Остальное используется для прозрачности или альфа-каналов (прим. перев.: похоже, у автора неточность — в 24-битном True Color по 8 бит на каждый цветовой канал, без прозрачности, об этом сказано в первом комментарии к оригиналу статьи).

Воспользуемся этой информацией, чтобы взглянуть на наши доступные в вебе цветовые свойства изнутри.

Значения цвета

Значения RGB

Последний раздел поясняет, о чем говорит запись rgba(x, x, x, y); , но давайте разберем это еще поподробнее и покажем еще несколько свойств с их применениями. В терминах значений веб-цветов в RGB-канале мы указываем цвет в диапазоне 0-255.

Hex-значения

Шестнадцатиричные цвета (Hex-цвета) — чуть другой формат для представления значений тем же образом. Hex-значения, пожалуй, самый общеупотребительный способ, которым веб-разработчики задают цвета в вебе.

Если вспомнить, что байт — это 8 бит, каждый шестнадцатиричный цвет представляет байт. Цвет указывается в соответствии с интенсивностью своих красного, зеленого и синего компонентов, так что это называется триплетом, причем каждый компонент выражается двумя знаками. Один байт представляет собой число в диапазоне от 00 до FF (в шестнадцатиричной записи) или от 0 до 255 в десятичной. Первый байт — это красный, второй — зеленый, третий — синий. Название Hex происходит от 16-ричной системы (англ. hexadecimal). Значения берутся из диапазона 0-9 и A-F, где 0 — наименьшее, а F — наибольшее, или #000000 — черный, а #FFFFFF — белый.

Для триплетов с повторяющимися значениями можно избавиться от повторения, записав их сокращенно, например, #0FF вместо #00FFFF . Эта система легко понятна компьютерам и очень кратка в записи, что делает ее полезной для быстрого копирования и задания цветов в программировании. Но если вы собираетесь делать с цветами что-то более сложное, для человека всё-таки чуть понятнее HSL.

HSL-значения

Логика и диапазоны, с которыми работают HSL-значения, похожи на таковые в RGB, но HSL-значения работают не со значениями, которыми представляет цвета монитор, а со значениями тона, насыщенности и яркости. Синтаксически это выглядит похоже на RGB-значения, но диапазоны другие. Эта система основана на цветовой системе Манселла (он был первым, кто разделил цвет на эти три канала или создал трехмерную систему на базе математических принципов, привязанных к реальному человеческому зрению).

Тон, насыщенность и яркость можно представить в виде трехмерной модели.

Тон вращается на 360 градусов, по полному кругу, а насыщенность и яркость — это проценты от 0 до 100.

Для браузеров переход от RGB-значений к HSL и обратно — достаточно простое изменение (около 11 строк кода, если точнее), но нам, людям, разобрать HSL намного проще. Представьте себе колесо, с плотным и насыщенным содержимым в центре. Этот пример весьма неплохо показывает, как это выражается.

Крис несколько лет назад тоже сделал удобный инструмент под названием «hsla explorer», который можно попробовать здесь.

Если вы не чувствуете себя особо опытными в работе с цветом, hsla() дает разработчикам несколько весьма простых правил, чтобы создавать приятные эффекты. Ниже, в разделе о генерации цветов, мы рассмотрим это чуть подробнее.

Именованные цвета

Именованные цвета нам, разработчикам, тоже доступны. Но работать с именованными цветами считается сложным из-за их неточности. Самые заметные и «знаменитые» примеры — то, что dark grey (тёмно-серый) на самом деле светлее, чем grey (просто серый), а lime (цвет лайма) и limegreen (зеленый оттенка лайма) — совершенно разные цвета. Есть даже игра, в которой надо угадывать именованные цвета в вебе, ее сделал Крис Хайльман. Когда-то давно chucknorris был кроваво-красным цветом (сейчас он поддерживается только в HTML, насколько я могу судить), но это был мой любимый цвет (прим. перев.: в HTML есть специальный алгоритм, преобразующий практически любые слова в Hex-значения, в комментариях к оригиналу статьи об этом рассказано подробнее). Именованные цвета бывают полезны, когда нужно быстро показать применение цвета, но чаще разработчики пользуются Sass и другими препроцессорами, чтобы хранить значения цветов в Hex, rgba или hsla, привязывая их к названиям цветов, принятым в компании.

Цветовые переменные

Считается правильным хранить цвета в переменных и никогда не использовать их напрямую, а вместо этого привязывать их другим переменным с более осмысленной системой именования. В CSS есть «родные» переменные, наподобие:

Но они еще слишком новые и на момент выхода статьи еще не добрались до браузеров Microsoft.

CSS-препроцессоры тоже поддерживают переменные, так что можете заводить переменные вроде $brandPrimary и использовать их сплошь у себя в коде. Либо ассоциативный массив:

Помните, что именование здесь важно. Иногда полезны абстрактные имена, так что если вы измените переменную, представляющую синий цвет, на оранжевый, вам не придется перелопачивать весь код и переименовывать все цветовые значения. Или хуже того, вешать объявление «$синий теперь оранжевый». *печальный вздох тромбона*

currentColor

currentColor — невероятно полезное значение. Оно подчиняется каскаду и полезно для распространения значения цвета на штуки вроде теней блока, обводок (outline), рамок и даже фонов.

Пусть у нас есть div, а в нем еще один div. Вот это сделает оранжевую рамку для внутреннего дива:

Это невероятно полезно для систем иконок, как SVG-шных, так и иконочных шрифтов. Можно задать currentColor в качестве значения по умолчанию для заливки (fill), обводки (stroke) или цвета текста (color), а затем использовать для оформления семантически подходящие CSS-классы, и иконка сама «подтянет» нужное значение.

Препроцессоры

CSS-препроцессоры замечательно подходят для возни с цветами. Вот несколько ссылок на документацию по цветовым функциям для разных препроцессоров:

Вот несколько крутых штук, которые можно делать именно с Sass:

Наверняка есть десятки способов программно смешивать и менять цвета с помощью препроцессоров, и мы не будем углубляться в них все, но вот великолепный интерактивный ресурс с более подробной информацией.

Цветовые свойства

Color, как CSS-свойство, относится к цвету текста. Чтобы задать цвет большой области, вам пригодится background-color , если только это не SVG-элемент, в случае которого подойдет fill . Border — это рамка вокруг HTML-элемента, тогда как stroke — ее SVG-шный аналог.

Тени блока и текста

Свойства box-shadow и text-shadow принимают значение цвета. Тени текста принимают 2-3 значения: г-тень (сдвиг тени по горизонтали), в-тень (сдвиг тени по вертикали) и необязательный радиус размытия. Тени блоков принимают 2-4 значения, г-тень, в-тень, необязательный радиус размытия и необязательная дистанция распространения. Еще можно указать в начале inset, чтобы получить внутреннюю тень. На этом сайте есть замечательные примеры с простым кодом, который легко скопировать.

Градиенты

Для работы линейных градиентов надо задать направление. От/к (в зависимости от браузерного префикса) верха, низа, левого или правого края, в градусах или вообще радиальные градиенты. Затем указываем контрольные точки и цвета, которые должны быть в этих точках. Они также принимают прозрачность.

В основном записывать синтаксис градиентов не настолько уж трудно, но мне вправду нравится работать с этим онлайновым генератором градиентов, поскольку он заодно создает сложное свойство filter для поддержки IE6-9. А вот еще очень красивый инструмент для создания градиентов uiGradients. Он замечательный и притом опенсорсный, так что можете поучаствовать в нем.

Столь же легко создавать градиенты в SVG. Мы определяем блок
и ссылаемся на него по id. Можно определить еще и поверхность для градиента.

Эти градиенты тоже поддерживают прозрачность, так что можно добиться интересных эффектов, в т.ч. со слоями, например, анимировать их в качестве масок.

Можно сделать и градиентный текст, только в вебките (уже не только — прим. перев.), есть хорошая заготовка кода здесь на CSS-Tricks (а здесь на css-live есть стандартная кроссбраузерная альтернатива — прим. перев.).

Генерируемые цвета

Есть несколько классных способов получить сразу кучу впечатляющих цветов. Мне всегда в радость играть с ними при программной генерации художественных объектов или элементов интерфейса.

Если не выходить за границы диапазонов, обозначенных в последних разделах, можно воспользоваться циклами for либо в Sass (или любом CSS-препроцессоре), или в JavaScript, либо получить значения цвета с помощью Math.Random() и Math.floor() . Math.floor() или Math.ceil() тут нужны для того, что если на выходе будет не целое число, мы получим ошибку и не сможем получить значение цвета.

Топ-пост этого месяца:  При выходе из под санкций нужно добавлять только канонический Disavow

Придерживайтесь полезного правила, что не надо изменять все три значения сразу. У меня удачные результаты выходили при сильном изменении в одном диапазоне значений, меньшем изменении второго значения и неизменном третьем значении, не обязательно именно в таком порядке. Например, в hsl очень легко переходить от одного цвета к другому, поскольку известно, что цикл по цветовому тону от 0 до 360 дает весь диапазон. Еще один плюс вращения цветового тона в градусах в том, что это полный круг, можно не ограничиваться диапазоном 0–360, даже -480 или 600 — по-прежнему понятные браузеру значения.

Я использовала это, чтобы фрукт менял цвет по циклу в этом примере:

А также в этом, с другим диапазоном (быстро прокручивайте содержимое списка):

В примере ниже, я использую Math.random() для значений rgb, чтоб наштамповать множество цветов в одном и том же диапазоне. Этот пример создает трехмерную сцену виртуальной реальности с помощью React. Я могла бы перебрать их и циклом for, но мне хотелось, чтобы цвета были случайными и тем самым лучше отражали движение. Простор для творчества тут безграничен.

Кликните по картинке, чтобы посмотреть пример целиком.

JavaScript

В библиотеку GreenSock входит инструмент, позволяющий анимировать относительные значения цвета, что полезно, так как позволяет взять много элементов сразу и анимировать их относительно их текущих цветовых координат. Вот небольшая демонстрация этого принципа на черепашках:

Другие интересные цветовые эффекты

Режимы смешивания и наложения фонов

Если вы пользовались эффектами слоев в Photoshop, вы, скорее всего, знакомы с режимами смешивания. Они использовались на почти каждом сайте в 90-х (на моем тоже *краснею*). Режимы смешивания и наложения фонов объединяют два изображения в один композитный слой, и для этого есть 16 режимов. Подробности каждого из них — за рамками этой статьи, но вот несколько ключевых примеров.

Верхнее изображение или цвет называется источником, а нижний слой — получателем. Область между ними, где и происходит магия наложения, называется подложкой. Мы смешиваем их по довольно простым математическим формулам.

Если желаете заморочиться основательно, как я, цветовые формулы для режимов наложения зависят от типа используемого эффекта. Например, режим «умножение» ( multiply ) — это получатель × источник = подложка. Другие эффекты — это вариации простых формул на основе вычитания, умножения, сложения и деления. Линейный режим — это A+B−1 , а режим Color Burn — это 1−(1−B)÷A . Но можно пользоваться ими и не зная всех этих формул.

Вот более развёрнутая документация, а вот очень простой пример, показывающий, как работает цвет с некоторыми из этих эффектов:

Эта замечательная статья Робина тоже показывает несколько по-настоящему сложных и впечатляющих эффектов, которых можно достичь применением нескольких режимов наложения по очереди. Ниже мы рассмотрим совмещение их с фильтрами. В наши дни в браузере можно делать очень многое.

Фильтры

CSS-фильтры предоставляют много отличных цветовых эффектов, а также возможность взять цветную картинку и сделать ее черно-белой. Есть замечательный ресурс здесь на CSS-Tricks, показывающий, как они работают, да и поддержка браузерами сейчас весьма неплоха. У Беннета Фили тоже есть вот такая симпатичная галерея фильтров, если вас тянет на исследования.

Фильтры и режимы размытия могут работать вместе! Юна Кравец сделала этот прекрасный инструмент под названием CSS Gram, объединив некоторые эффекты, чтобы воссоздать типовые фильтры из Instagram, внизу там у нее есть хорошая документация.

feColorMatrix

У Юны есть еще одна статья о том, как создать эти же изображения другим способом — с помощью feColorMatrix , представляющего собой примитив фильтра в SVG, который можно применять и к HTML-элементам. Он очень мощный и позволяет работать с цветом с филигранной точностью. Как видно из названия, базовая разметка feColorMatrix использует матрицу значений, и мы вызываем ее по назначенному ей id.

Можно также расширить эту матрицу и подстроить тон, насыщенность и т.д. этих значений:

Все эти возможности подробно рассматриваются в статье Юны, но вы можете найти еще больше информации об этом и многих других умопомрачительных инструментах SVG для цветов и градиентов в книге Амелии Беллами-Ройдз «Цвета, паттерны и градиенты в SVG», выпущенной издательством O’Reilly, или в поясняющем примере Майка Маллани.

Доступность и еще кое-что на заметку о цветах

Цвет существует не сам по себе, а в связи с другим цветом. Вот в чем сложность цветов. Вы наверняка знакомы с этим с точки зрения доступности. Бледно-зеленый на черном может быть доступным, но если поменять фон на белый — уже нет.

Цветовую доступность можно измерить многими инструментами. Вот некоторых из моих любимых:

Неплохо также с самого начала настроить палитру для доступности. Color Safe — замечательный инструмент, способный помочь в этом. А когда всё уже настроено, оценить страницу поможет WAVE (инструмент веб-доступности):

Цвет и атмосфера

На цвет влияет атмосфера, что крайне важно знать, если вы собираетесь создавать какую-либо иллюзию глубины. Предметы, которые к вам ближе, видны с большей насыщенностью и более контрастно. Предметы, которые очень далеко от вас, начинают казаться размытыми.

Пейзаж, показывающий разницу в цветах между близкими и далекими предметами

Тени не серые, их цвет является дополнительным к цвету света. Если вы посветите себе на руку желтым светом, тень будет выглядеть пурпурной. Это полезно знать, если вы делаете какие-либо ультрамодные длинные тени.

Поля ввода для цвета

В браузерах есть встроенный инструмент для выбора цвета, с помощью которого ваши пользователи могут выбирать цвета динамически. Можно написать или , если предпочитаете, чтобы с самого начала была подсказка цвета. Вот так просто. Молодцы, браузеры. Единственное, что нужно иметь в виду — они могут чуть по-разному выглядеть от браузера к браузеру, как, впрочем, и любые другие встроенные элементы управления. Этот пример Ноа Блона показывает, как использовать это в тандеме с цветовым CSS-фильтром «тон», чтобы динамически выделять элементы картинки, цвет которых нужно изменить. Оставшаяся часть картинки черно-белая, поэтому не затрагивается. Ловко придумано.

Занятности для разработчиков и другие ресурсы

  • Плагин Color Highlighter для редактора Sublime Text — то, с помощью чего я легко определяю, какой цвет браузер сможет распознать. Мне нравится использовать <"ha_style": "outlined">, но из этой статьи я узнала, что Уэс Бос предпочитает «filled».
  • Есть несколько разных традиционных комбинаций для палитры и онлайновых ресурсов, с помощью которых можно их генерировать. Для любителей чего-то более научного — Paletton или Adobe Color. Бенджамин Найт воссоздал инструмент Adobe Color на библиотеке d3 (на CodePen), это весьма мастерская работа, на которую стоит взглянуть. Если хотите, чтобы веб сделал за вас всю тяжелую работу (а кто не хочет?), нет ничего проще Coolors.
  • Если вам нужна помощь в понимании цветов, или вы ищете простой быстрый инструмент, который менял бы вам цветовые свойства с одного типа на другой, Colorhexa обеспечит вас всеми мыслимыми типами замены цвета.
  • Для самых дотошных «ботаников» по части цвета, можно даже настроить цветной вывод в консоли. Вот замечательный пример, показывающий, как это работает (и есть подробная статья Юли Бухваловой на эту тему — прим. перев.).

Заключение

Тема этой статьи довольно обширна, а в вебе масса цвета, в котором стоит покопаться, но, надеюсь, эта краткая статья станет вам отправной точкой для экспериментов и понимания.

HTML Стили — CSS

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

  • Встроенный — с помощью атрибута Style в элементах HTML
  • Internal -с помощью

12 малоизвестных возможностей CSS

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

В процессе работы с CSS я постоянно нахожу что-нибудь интересненькое, так что решил написать пост и поделиться своими знаниями с вами. Правда, учитывайте, что не всё, о чем будет рассказано, имеет непосредственное практическое значение, но, на всякий случай, в хозяйстве пригодится.

color не только текст красит

Начнем, пожалуй, с простых вещей. Свойство color используется разработчиками постоянно. Те из вас, у кого не так много опыта работы с CSS, возможно, и не знали, что это свойство определяет не только цвет текста!

Обратите внимание, что в CSS свойство color:yellow используется лишь раз применительно к элементу body . Как видите, всё окрасилось в желтый цвет:

  • Альтернативный текст на месте отсутствующего изображения
  • Рамка у элементов списка
  • Маркер ненумерованного списка
  • Номер упорядоченного списка
  • Элемент hr

Интересно, что по умолчанию элемент hr не наследует значение свойства color , однако этого можно достичь, установив свойству border-color значение inherit . Как по мне, так это несколько странное поведение.

Данное свойство описывает цвет переднего плана текстового содержимого элемента. В дополнение к этому оно может косвенно использоваться другими свойствами, которые принимают значения цвета.

Я пока не придумал, что же это такое, «передний план», однако если вы что-то знаете, напишите об этом в комментариях. Насколько я понимаю, под передним планом в данном случае понимается цвет самого текста, а не фона, а также не фоновых элементов, — прим. переводчика.

Свойство visibility может иметь значение collapse

Вам наверняка доводилось использовать свойство visibility , и не раз. «Обычные» значения — visible (по умолчанию у всех элементов) и hidden , которое скрывает элемент, оставляя при этом под него место (в отличие от display:none ).

Третье, редко используемое значение — collapse . Работает так же, как и hidden применительно ко всем элементам, кроме табличных рядов, колонок и их групп. В случае с элементами таблиц предполагается, что значение collapse скроет их подобно display:none таким образом, что на ранее занимаемом ими месте расположится другое содержимое таблицы.

К сожалению, не все браузеры одинаково обрабатывают данное значение. По этой причине альманах CSS-Tricks вообще не рекомендует использовать данное свойство. Попробуйте демо.

Из того, что обнаружил я:

  • В Хроме разницы между collapse и hidden не наблюдается (посмотрите этот баг репорт и комментарии)
  • В Файрфоксе, Опере и ИЕ 11 collapse , похоже, работает как следует: ряд таблицы удаляется, а тот, что был ниже, поднимается наверх

Теперь вы знаете чуточку больше, тем не менее из-за разного поведения браузеров использовать visibility:collapse вряд ли имеет смысл.

Новые значения свойства background

В CSS 2.1 короткая запись свойства background включала в себя пять значений следующих свойств: background-color , background-image , background-repeat , background-attachment и background-position . Начиная с CSS 3 добавилось еще три значения, так что данное свойство теперь выглядит так:

Обратите внимание на слеш, который ставится там подобно короткой записи свойства font и border-radius [ссылка]. Этот слеш позволит вам включить значение background-size после background-position в тех браузерах, которые это поддерживают. Также вы можете добавить еще два значения: background-origin и background-clip .

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

Свойство clip работает только на абсолютно спозиционированных элементах

Наверняка вы в курсе свойства clip . Используется оно так:

Данное правило «обрежет» элемент с четырех сторон на указанное количество пикселей. Единственный нюанс состоит в том, что элемент, к которому вы применяете данное свойство, должен быть спозиционирован абсолютно.

А теперь посмотрите, как свойство clip перестает работать, если мы уберем абсолютное позиционирование элемента.

Помимо position:absolute вы также можете использовать position:fixed , поскольку, согласно документации, зафиксированные элементы также квалифицируются как «абсолютно спозиционированные».

Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высоты

По началу это трудно понять, и я об этом писал. Возможно, вы знаете, что длины элементов, указанные в процентах, рассчитываются, исходя из длины их контейнера. Так вот, верхние и нижние внутренние отступы (padding) и те же внешние (margin) тоже рассчитываются исходя из ширины контейнера, а не его высоты.

Заметьте, что вложенный элемент имеет три отступа, заданных в процентах (верхний и нижний внутренние отступы и нижний внешний отступ). Слайдер изменяет только ширину контейнера. Однако её изменение влияет на просчет отступов. Зависимость именно от ширины контейнера показана в выводе величин на страницу.

Свойство border

Все мы когда-либо делали это:

Свойство border объединяет значения свойств border-width , border-style и border-color в единую конструкцию. Но не забывайте, что каждое из свойств, значение которых содержит border , само по себе является сокращенной записью. Так, например, border-width может быть записано следующим образом:

Таким образом мы установим разную ширину рамки для всех четырех сторон элемента. То же относится и к свойствам border-style и border-color . Нечто вот такое ужасное можно получить:

Можно пойти еще дальше и задать эти значения по отдельности с помощью свойств border-left-style , border-top-width , border-bottom-color и так далее.

Фишка в том, что с помощью border вы не сможете задать разные значения для разных сторон. Таким образом, получается нечто вроде сокращенной записи внутри сокращенной записи внутри сокращенной записи.

Свойство text-decoration — теперь сокращенная запись

Я знал: что-нибудь из этого списка обязательно вскружит вам голову. А спецификация гласит, что теперь это стандарт.

Данное свойство теперь может содержать в себе значения трех свойств: text-decoration-line , text-decoration-color и text-decoration-style . К сожалению, Файрфокс — единственный браузер, который поддерживает новые свойства, но при этом (видимо, для обеспечения обратной совместимости) не поддерживает сокращенный синтаксис.

Попробуйте эту демку в Файрфоксе. В ней новые свойства используются по отдельности. С ними надо быть аккуратнее, ибо в данное время браузеры не смогут распарсить дополнительные значения у свойства text-decoration и просто пропустят его. А это нехорошо с точки зрения обратной совместимости.

Свойство border-width поддерживает ключевые значения

Это, конечно, не нечто из ряда вон выходящее, да и не ново, тем не менее помимо обычных значений ширины (напр., 5px или 1em ) border-width поддерживает три ключевых значения: medium , thin и thick .

По факту, начальное значение свойтва border-width — medium . Ниже продемонстрировано значение thick :

В спецификации CSS конкретная ширина для ключевых значений не прописана, однако все браузеры используют 1px , 3px и 5px соответственно.

«Никто не использует border-image »

Не так давно я писал о свойстве border-image на SitePoint. Оно поддерживается всеми современными браузерами, за исключением IE 10 и ниже. Но кому какая разница?

border-image — весьма забавное свойство, которое позволяет обрамлять контейнер неким изображением.

К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!

Есть такое свойство empty-cells

И оно поддерживается всеми браузерами, включая IE 8:

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

В данном случае я специально выставил рамку у ячеек и добавил небольшие отступы, чтобы была видна разница между двумя состояниями, хотя в некоторых случаях изменение данного свойства может не иметь никакого визуального эффекта.

Свойство font-style поддерживает значение oblique

Наиболее используемые значения данного свойства — normal и italic . Но есть еще и oblique .

И что же это значит? Почему текст выглядит так же, как если бы он был написан курсивом?

Спецификация объясняет данное поведение следующим образом:

… выбирает шрифт, помеченный как наклонный, иначе — курсивный.

Описание курсива в спецификации — примерно о том же. Термин «наклонный» (oblique) — из типографики, обозначает, собственно, наклоненный текст, но не настоящий италик.

CSS обрабатывает наклонный текст таким образом, что значение oblique взаимозаменяемо с italic (так говорится в спецификации) до тех пор, пока используемый шрифт не имеет отдельного наклонного начертания.

Не знаю шрифтов, которые бы имели наклонное начертание, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, — прим. переводчика) Насколько я понял, шрифт не может иметь оба начертания: курсив и наклонное — одновременно, поскольку наклонное начертание является искусственной заменой курсива в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены курсива, — прим. переводчика)

Так что, если я не ошибаюсь, когда шрифт не имеет курсивного начертания, значение свойства font-style:italic на самом деле покажет нам значение свойства font-style:oblique .

Большое спасибо Ogi за комментарии относительно путаницы в терминологии, теперь это исправлено и вместо «гарнитуры» — «начертание», а вместо «италика» — «курсив», — прим. переводчика

word-wrap — то же, что и overflow-wrap

Свойство word-wrap используется не так часто, однако в некоторых случаях может оказаться полезным. Очень распространенный пример — разбиение длинной непрерывной строки текста во избежание выхода за пределы контейнера.

Поскольку данное свойство придумали в Microsoft, оно поддерживается всеми браузерами, в том числе IE с версии 5.5.

Несмотря на кросс-браузерность и надлежащую поддержку, W3C решило заменить свойство word-wrap на overflow-wrap : по всей видимости, они посчитали прежнее название неправильным. overflow-wrap имеет те же значения, что и word-wrap , а последнее сейчас рассматривается как «альтернативное».

Несмотря на то, что поддержка overflow-wrap еще мало распространена, не стоит переживать, ибо мы все так же можем использовать word-wrap : браузеры его поддерживают в том числе и в целях обратной совместимости.

Что до overflow-wrap — там уж когда все популярные браузеры обновятся, а пока я не вижу смысла что-то менять.

Много ли нового узнали вы из всего этого?

Хоть что-нибудь — уже хорошо. Наверняка крутые ребята знают большую часть, если не всё из вышеперечисленного. Но менее продвинутым разработчикам это узнать весьма полезно.

Расширенное наследование цвета с помощью переменной currentColor

Если вы работаете с Sass или LESS, то, вероятно, вы уже используете переменные в своих стилях и знаете, чем они хороши. Если вы не используете препроцессор, вам может быть интересно, почему столько разговоров вокруг переменных и чем они полезны. В этой статье, мы рассмотрим, чем полезны переменные, и познакомимся с одной конкретной переменной: currentColor.

Чем хороши переменные?

Переменные в CSS полезны тем, что они помогают придерживаться принципа разработки DRY (Don’t Repeat Yourself — «не повторяйся»). Особенно полезны они в крупных проектах, которые содержат большое число повторяющихся значений.

Один из наиболее популярных случаев использования переменных — это цветовые схемы / темизация приложения. С использованием переменных создавать и поддерживать цветовые схемы в CSS становится намного проще. К примеру, цветовая схема как правило требует использования определенного цвета в нескольких свойствах. Если вы захотите изменить базовый цвет темы, вам нужно будет изменить все вхождения данного цвета в таблице стилей. С помощью переменных, вы можете определить значение в одном месте (например, в переменной «primary-color») и использовать эту переменную в таблице стилей. Если спустя какое-то время вам захочется изменить этот цвет, нужно будет изменить значение этой переменной, и все значения изменятся автоматически.

В CSS2.1 не было переменных (хотя это не совсем правда, как вы увидите в этой статье). В 2014 году появились нативные переменные CSS, которые в целом похожи на переменные препроцессоров. Эти переменные возможно даже более функциональные, чем переменные препроцессоров. Переменные CSS могут использоваться в качестве значения во всех свойствах.

В дополнение к переменным в CSS появилось новое ключевое слово, которое практически аналогично переменной: currentColor.

Ключевое слово currentColor

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

Далее в примерах показаны свойства, принимающие currentColor в качестве значения.

Другое отличие между currentColor и переменными CSS в том, что вы не можете присвоить currentColor значение. Значением currentColor является текущий цвет элемента, т.е. текущее значение свойства color. Название currentColor в этом случае отражает суть.

Так, если мы вернемся к предыдущему примеру, currentColor устанавливает цвет тени таким же, как текущее значение свойства color. Если для элемента не задано свойство color, оно будет наследоваться от родителя. Если ни у одного из родителей не задано свойство color — будет использоваться значение по умолчанию, в большинстве браузеров это черный цвет.

Другими словами: ключевое слово currentColor позволяет в свойствах элементов наследовать значение свойства color.

Для свойств, которые уже наследуют значение свойства color, ключевое слово currentColor не будет полезно.

Свойства и элементы, которые наследуют значение color по умолчанию

Если элемент имеет явно заданное или унаследованное свойство color, некоторые свойства наследуют это значение по умоланию.

Например, границы элемента. Даже если вы не укажете цвет границы, она будет иметь такое же значение, что и свойство color. Если для элемента не определено свойство color, в большинстве браузеров будет использоваться черный цвет.

В примере ниже цвет границы должен иметь значение «purple»:

Следующие свойства наследуют значение свойства color по умолчанию:

  • Цвет текста элемента
  • Значение свойства outline
  • Цвет границы
  • Значение свойства box-shadow
  • Цвет атрибута alt элемента img. Если изображение не может быть отображено, выводится текст, заданный в атрибуте alt.
  • Цвет буллетов и границы элементов списка
  • В некоторых браузерах (например, в Chrome) цвет границы элемента

Если для этих свойств явно не задать значение цвета, он будет наследоваться от значения свойства color.

Ниже представлено демо, показывающее, как элементы наследуют свойство color, заданное у элемента . Измените значение свойва color у элемента , чтобы убедиться, что цвет этих элементов изменится.

Здесь может возникнуть вопрос: если многие свойства уже наследуют значение свойства color, то как и где может использоваться currentColor?

Расширенное наследование цвета с помощью currentColor

Есть ряд случаев, когда может пригодиться получение значения свойства color. Один из примеров, когда значение свойства color не наследется по умолчанию — это градиенты. Линейный и радиальный градиенты CSS не наследуют свойство color. В помощью currentColor вы можете создать градиент, использующий основной цвет темы.

Такой пример был создан Скотом Келлумом, который взял за основу эту концепцию и пошел немного дальше, добавив анимацию. Т.к. анимируется свойство color, все свойства, наследующие color, также анимируются. Посмотреть пример Скотта Келлума можно на CodePen.

Это отличный пример использования currentColor.

Тем не менее, есть более практичные варианты использования currentColor. Давайте рассмотрим некоторые из них.

Случаи использования currentColor

Использование currentColor для темизации компонентов UI

От предыдущего примера, мы можем перейти к более практичному (и блестящему, надо сказать) примеру, продемонстрированному Саймоном «Simurai» в прошлом году на CSSConf. Доклад был посвящен тому, как использовать flexbox, currentColor и em в компонентах UI, чтобы быстро стилизовать все приложение прямо в браузере.

Чтобы продемонстрировать полезность currentColor, Саймон создал набор элементов интерфейса, включая несколько слайдеров. Эти элементы имели некую цветовую схему. В качестве цвета слайдеров и полей ввода использовалась переменная currentColor.

Пример использования currentColor для слайдера

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

Изображение ниже показывает это в действии. Саймон, используя инструменты разработчика в браузере, чтобы изменить значение свойства color, получил наглядную демонстрацию изменения компонентов интерфейса.

Изменение значения свойства color обновляет цвет всех компонентов UI, наследующих это свойство, с помощью переменной currentColor.

Используя возможности devtools, вы можете изменить тему, как вам нравится, и сохранить результат из браузера. Подробнее можно почитать в блоге Саймона.

Использование currentColor для темизации и стилизации SVG

Возможности SVG велики, но они имеют некоторые ограничения стилизации, в зависимости от того, как вы их используете. Один из таких случаев — повторное использование частей SVG с помощью элемента .

Если вы не знакомы с элементом , можно почитать подробнее о нем здесь . Идея элемента заключается в повторном использовании части SVG где угодно на странице. Использование элемента похоже на копирование элемента в графическом редакторе, за исключением того, что копии остаются связанными, т.е. изменение оригинала приводит к изменению копии.

Часто элемент используется при создании SVG-спрайтов . SVG содержит иконки и используется как спрайт, мы можем вставлять иконки на странице используя . Подробнее о SVG спрайтах можно почитать в статье .

Когда SVG вставляется с помощью элемента , его содержимое копируется и содержится в shadow DOM. Это значит, его нельзя выбрать и стилизовать с помощью CSS. Это одна из причин того, почему SVG иконки используются так ограниченно.

Мы можем обойти это ограничение, указав в качестве значения currentColor, таким образом он как бы «просочится» внутрь SVG.

Рассмотрим пример SVG-иконки:

Допустим, иконка #home будет содержать что-то вроде этого:

Значение свойства color для элемента #roof будет наследоваться от родителя, т.к. для элемента #roof не задано другое значение, а атрибут fill элемента #bottom также будет наследоваться от родителя, т.к. в качестве его значения использовался currentColor.

Фабрис Вайнберг написал статью об этой технике в своем блоге на Codepen .

Пользоваться этой техникой удобно, когда вы хотите создать несколько иконок, каждая из которых имеет свой цвет; все, что вам придется сделать в этом случае — изменить значения color и fill в CSS. Пример, который Фабрис демонстрируем в своем посте:

See the Pen Sass SVG Icons 1.1KB by Fabrice Weinberg (@FWeinb) on CodePen.

Конечно, вы можете использовать currentColor для нескольких элементов внутри SVG. Однако, как вы, наверное, уже заметили, эта техника позволяет изменять только два цвета внутри SVG.

Если вы хотите иметь больше контроля над цветами и указывать дополнительные цветовые значения — вам потребуется больше переменных; как раз здесь пригодятся переменные CSS. Вы можете прочитать больше об этом здесь .

Заключение

В примерах выше мы рассмотрели, как можно использовать currentColor для того, чтобы управлять цветом, который используется в нескольких местах, и меть возможность задавать его в одном месте. Это помогает писать более компактный, поддерживаемый CSS. Особенно в ситуациях, подобных примеру Саймона с UI компонентами.

С помощью переменных CSS вы можете определить свой собственный набор переменных и использовать их в гораздо большем количестве случаев, чем currentColor, т.к. они принимаются в качестве значения любыми свойствами CSS, а не только теми, которые требуют цвет в качестве значения. Опять же, если вы уже используете препроцессор — вы знаете, как полезны переменные.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Как сделать в html документе текст цветным и преобразить свои статьи до неузнаваемости

Доброго времени суток, дорогие мои верные читатели и гости блога. В нескольких предыдущих статьях я затрагивал темы выделения в тексте ключевых моментов и определение фона страницы, однако не упоминал, как сделать в html текст цветным. Это очень простая тема, которую, я надеюсь, вы быстро освоите и будете использовать для оформления страниц своих сайтов.

В данной публикации я опишу основные элементы управления цветовой палитрой текста, каким способом видоизменять фон предложений, покажу, как выглядит таблица кодов html-цветов, а также, как обычно, приведу пример кода.

После прочтения статьи вы с легкостью сможете оперировать полученными знаниями и преображать дизайн текстовой информации на ваших веб-ресурсах! Итак, приступим к делу.

Раскрасим буквы разными цветами

В первую очередь изменить цвет как отдельных букв, так и целого предложения можно при помощи тега html . Хоть это и слегка устаревший элемент, его иногда используют разработчики и поддерживают все браузеры. При помощи можно определить стиль шрифта, его цвет и размер. Так, при запуске этой строки изменится внешний вид заглавной буквы:

Более известным и распространенным среди верстальщиков приемом для видоизменения текста является css. Для установки определенного цвета шрифта в основном используют свойство color. Его описывают для конкретного тега в спецификациях стиля оформления.

Ниже приведен пример форматирования внешнего вида заголовка страницы:

Видоизменение цветовой палитры при помощи css

color

Поддержка браузерами

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство color устанавливает цвет переднего плана элемента. К переднему плану элемента относится текст и элементы декорирования текста (всё, что устанавливается свойством text-decoration).

Не смотря на то, что свойство color устанавливает цвет текста, оно так же влияет на цвет рамки, устанавливаемый по умолчанию, то есть, если для рамки не будет явно указан какой-либо цвет, то она будет иметь тот же цвет, что установлен для текста.

Если требуется явно задать цвета рамки, то нужно использовать свойство border-color.

Топ-пост этого месяца:  Как сделать в html5 меню горизонтальное и вертикальное
Добавить комментарий