Css изменить цвет элемента

CSS-свойство color

CSS-свойство color позволяет задавать цвет текста и фона элемента на веб-странице.

⭐ Поддержка браузерами свойства color

selector — это селектор элемента, к которому нужно применить стили, color — название свойства, а value — значение цвета.

Наследование

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

Значения свойства color

Значение может быть установлено для любого элемента HTML, включая текст, ссылки, заголовки и другие элементы. Оно может быть задано как внутри тега HTML, так и внутри файла CSS.

Подробно про цветовые форматы рассказали в статье.

Свойство color может принимать следующие значения.

Название цвета

Значение свойства color может быть задано названием цвета на английском языке, например, red — красный, blue — синий и так далее.

RGB — Red, Green, Blue

Модель цвета, основанная на комбинации красного, зелёного и синего цветов. Пример: rgb(255, 0, 0) , где первое число представляет значение красного цвета, второе число — зелёного цвета, а третье число — синего цвета. Каждое значение может быть в диапазоне от 0 до 255 .

RGBA — Red, Green, Blue, Alpha

Расширение RGB, которое, кроме трёх цветов, включает значение прозрачности. Пример: rgba(255, 0, 0, 0.5) , где первые три числа — значения RGB, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

HSL — Hue, Saturation, Lightness

Модель цвета, основанная на оттенке — hue, насыщенности — saturation и яркости — lightness цвета. Пример: hsl(0, 100%, 50%) , где первое число — значение оттенка в градусах, второе число — значение насыщенности в процентах, а третье число — значение яркости в процентах.

HSLA — Hue, Saturation, Lightness, Alpha

Расширение HSL, которое также включает в себя значение прозрачности. Пример: hsla(0, 100%, 50%, 0.5) , где первые три числа — значения HSL, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

HEX — Hexadecimal

Формат цвета, основанный на шестнадцатеричном коде цвета. Пример: #FF0000 , где первые две цифры обозначают значение красного цвета в шестнадцатеричном формате от 00 до FF , следующие две цифры обозначают значение зеленого цвета, а последние две цифры обозначают значение синего цвета.

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

Примеры использования

Этот текст будет с изменённым цветом.
 

Этот блок будет с изменённым фоновым цветом.
 

Этот блок будет с изменённым цветом границы.
 

Нюансы использования

Контраст. При выборе цвета текста для ссылок, желательно использовать контрастный цвет, который заметно отличается от цвета обычного текста.

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

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

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Руководство по цветовым функциям CSS

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

Что такое цветовые функции CSS?

Цветовые функции CSS (CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей.

При помощи цветовых функций можно настраивать тон (hue), насыщенность (saturation), светлоту (lightness) и непрозрачность (opacity) цвета и даже смешивать вместе несколько цветов.

Существует множество функций CSS, давайте рассмотрим некоторые из них:

• rgb() : получает три значения, обозначающие красный, зелёный и синий компонент, и возвращает цвет. Значения могут находиться в интервале от 0 до 255. Пример: color: rgb(255, 0, 0) возвращает красный цвет.
• rgba() : схожа с rgb() , но позволяет ещё и задавать непрозрачность цвета. Четвёртое значение (альфа) может находиться в интервале от 0 до 1. Пример: color: rgba(255, 0, 0, 0.5) возвращает полупрозрачный красный цвет.
• hsl() : получает три значения, обозначающие тон, насыщенность и светлоту, возвращает цвет. Пример: color: hsl(0, 100%, 50%) возвращает красный цвет.
• hsla() : схожа с hsl() , но также позволяет задавать непрозрачность цвета. Пример: color: hsla(0, 100%, 50%, 0.5) возвращает полупрозрачный красный цвет.
• mix() : позволяет смешивать два цвета с опциональным параметром веса. Пример: color: mix(red, blue) возвращает оттенок фиолетового.

▍ RGB()

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

Функция RGB получает три значения, каждый из которых обознчает яркость:

div < background-color: rgb(0, 255, 0); >/*всем элементам div задаётся зелёный цвет*/

▍ HSL()

Функция HSL схожа с функцией RGB, но вместо значений красного, зелёного и синего она использует значения:

Значение тона (hue) в функции HSL означает сам цвет , его значения находятся в интервале от 0 до 360:

• Значение 0 для hue обозначает красный цвет, значение 120 — зелёный, а значение 240 — синий.
• Значение saturation в функции HSL обозначает интенсивность цвета, которая находится в интервале от 0% до 100%. Значение 100% saturation означает, что цвет полностью насыщенный, а значение 0% означает, что цвет серый.
• Значение lightness в функции HSL обозначает яркость цвета, которая находится в интервале от 0% до 100%. Значение 50% lightness означает, что цвет нейтрально серый , значение 100% означает, что цвет полностью светлый , а значение 0% означает, что цвет полностью тёмный .

div < background-color: hsl(120, 100%, 50%); >/* Все элементы зелёные, полностью насыщенные и с нейтральной светлотой. */

▍ RGBA()

Функция RGBA похожа на функцию RGB, но имеет дополнительный бонус:

Функция RGBA получает четыре значения:

div < color: rgba(0, 0, 255, 0.75); >/* все элементы синие с непрозрачностью 75%. */

▍ HSLA()

Теперь давайте поговорим о функции HSLA.

Функция HSLA аналогична функции HSL, но с добавлением прозрачности

Функция HSLA получает четыре значения:

div < color: hsla(240, 100%, 50%, 0.75); >/* все элементы синие с непрозрачностью 75%. */

Собственные свойства или переменные CSS

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

Для создания собственного свойства достаточно использовать синтаксис — , за которым следует имя свойства и его значение:

Мы создали собственное свойство с именем —primary-color и значением blue .

Теперь для использования этого свойства можно использовать в селекторах CSS функцию var() :

Приведённый код устанавливает синий цвет фона для всех элементов , потому что мы используем собственное свойство —primary-color .

Если мы хотим изменить свойство —primary-color , достаточно изменить его в одном месте, и оно автоматически обновится во всей таблице стилей.

Преимущества использования собственных свойств:

• Многократное использование кода : вместо повторения значений в таблице стилей можно хранить значения в собственных свойствах и использовать их многократно.
• Удобство поддержки : собственные свойства упрощают поддержку стилей, поскольку обновлять значения нужно только в одном месте.
• Гибкость : собственные свойства позволяют менять внешний вид сайта, меняя значения в одном месте, а не вносить изменения во множество селекторов.

Рекомендации по использованию цветовых функций CSS

▍ Создание палитры цветов для веб-сайта

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

Для задания цветов можно использовать функции RGB, HSL, RGBA и HSLA.

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

▍ Использование цветовых функций CSS для контрастности и иерархии

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

Также можно использовать цвет для привлечения внимания к отдельным элементам, таким как кнопки или ссылки:

▍ Тестирование цветовых функций на читаемость и accessibility

Наконец, важно тестировать цвета на читаемость и accessibility. Убедитесь, что цвета достаточно контрастны, чтобы легко читаться, особенно для людей с недостатком цветового зрения.

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

Продвинутые техники работы с цветовыми функциями CSS

▍ Использование переменных CSS для динамических цветовых схем

Хотели ли вы научиться переключать цветовые схемы веб-сайтов всего в несколько строк кода? Благодаря переменным (собственным свойствам) CSS это становится возможным. Можно создать несколько переменных для хранения цветовой палитры, а затем применить их во всей таблице стилей.

Благодаря этому при необходимости изменения цветовой схемы вам достаточно будет изменить значения в переменных:

В этом примере мы создали два собственных свойства для основного и дополнительного цветов. Затем мы использовали их для стилизации элементов h1 и button .

▍ Создание анимаций при помощи цветовых функций CSS

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

Здесь мы задали в качестве стандартного цвета фона кнопки зелёный ( hsl(120, 100%, 50%) ) и добавили переход, чтобы при наведении курсора на кнопку цвет плавно менялся. Для выделенного состояния мы изменили цвет на синий ( hsl(240, 100%, 50%) ).

▍ Использование цветовых функций CSS для градиентов и прозрачности

Ещё один интересный фокус, который можно проделать с цветовыми функциями CSS — это создание градиентов и прозрачности. Можно использовать цветовые функции RGBA и HSLA для создания полупрозрачных цветов, а затем комбинировать их для создания градиентов:

Здесь мы создали линейный градиент, идущий от красного цвета RGBA до зелёного цвета HSLA. Оба цвета имеют значение альфы 0.5, поэтому они полупрозрачны.

Поэкспериментируйте с этими функциями и дайте волю своей креативности.

Заключение

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

Источник