Как сделать цвет светлее css

CSS фильтры

CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы, полное описание на developer.mozilla.org.

В данной статье представлены только основные фильтры по цвету, по мимо них есть наложение тени и фильтры с использованием SVG.

Blur – размытие

Размытие по Гауссу, значение задается в px или em, по умолчанию 0, отрицательные значения не допускается.

Brightness – яркость

Понижение или повышение яркости изображения, значение задается в процентах или числом. По умолчанию 100% или 1, отрицательное значение не допускается.

Contrast – контраст

Понижение или повышение контраста изображения, значение задается в процентах или числом, по умолчанию 100% или 1, отрицательное значение не допускается.

Grayscale – обесцвечивание

Обесцвечивание, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.

Hue-rotate – замена цветов

Замена цветов, в качестве значения указывается угол (deg) от 0 до 360, значение может быть отрицательным.

Invert – инверсия цветов

Инверсия цветов, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.

Opacity – прозрачность

Прозрачность элемента. Значение от 0% до 100% или от 0 до 1, по умолчанию 100%.

Saturate – насыщенность

Насыщенностью цветов, интенсивность задаётся положительным числом или процентами, по умолчанию 1 или 100%.

Sepia – сепия

Сепия или эффект старины, значение от 0% до 100%.

Комментарии

Другие публикации

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Источник

Руководство по цветовым функциям 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 более гибким, удобным в поддержке и работе.

Источник