Функция invert

Функции фильтров

CSS позволяет накладывать поверх картинок или фонов различные фильтры. Почти как в Инстаграме. Можно, например, размыть или обесцветить изображение, сделать его более контрастным.

Функции используются в качестве значений для свойств filter и backdrop — filter .

Пример

Скопировать ссылку «Пример» Скопировано

 div  filter: saturate(2.2);> div  filter: saturate(2.2); >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

blur ( )

Скопировать ссылку «blur()» Скопировано

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

 img  filter: blur(3px);> img  filter: blur(3px); >    Скопировать Скопировано Не удалось скопировать   

brightness ( )

Скопировать ссылку «brightness()» Скопировано

Меняет яркость изображения. В скобках можно указать любое значение от 0% и выше. Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходную яркость. Значение больше 100% выкрутит яркость картинки. Значением может быть целое или дробное число без единиц измерения.

 img  filter: brightness(30%);> img  filter: brightness(30%); >    Скопировать Скопировано Не удалось скопировать   

contrast ( )

Скопировать ссылку «contrast()» Скопировано

Меняет контраст изображения. В скобках можно указать любое значение от 0% и выше. Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходный контраст. Значение больше 100% усилит исходный контраст. Значением может быть целое или дробное число без единиц измерения.

 img  filter: contrast(250%);> img  filter: contrast(250%); >    Скопировать Скопировано Не удалось скопировать   

drop — shadow ( )

Скопировать ссылку «drop-shadow()» Скопировано

Задаёт тень для картинки. Тень располагается снаружи элемента. Эта функция очень похожа на box — shadow по допустимым значениям и результату. Разница лишь в том, что нельзя указывать ключевое слово inset .

 img  filter: drop-shadow(4px 4px red);> img  filter: drop-shadow(4px 4px red); >    Скопировать Скопировано Не удалось скопировать   

grayscale ( )

Скопировать ссылку «grayscale()» Скопировано

Делает изображение чёрно-белым. В скобках можно указать значение от 0% до 100%. Значение 100% сделает изображение полностью чёрно-белым. Значение 0% вернёт изображению исходные цвета. Значением может быть целое или дробное число без единиц измерения.

 img  filter: grayscale(80%);> img  filter: grayscale(80%); >    Скопировать Скопировано Не удалось скопировать   

hue — rotate ( )

Скопировать ссылку «hue-rotate()» Скопировано

Меняет цвета изображения за счёт поворота цветового круга. Угол поворота указывается в скобках функции. Можно указывать угол в градусах deg или в поворотах turn .

 img  filter: hue-rotate(0.5turn);> img  filter: hue-rotate(0.5turn); >    Скопировать Скопировано Не удалось скопировать   

invert ( )

Скопировать ссылку «invert()» Скопировано

Инвертирует цвета изображения, как бы выворачивает их, превращая в противоположные. В результате получается что-то вроде негатива. Можно указать процент инверсии от 0% до 100%. При 100% цвета на картинке полностью инвертированы. Отрицательные значения или значения больше 100% не допускаются.

 img  filter: invert(100%);> img  filter: invert(100%); >    Скопировать Скопировано Не удалось скопировать   

opacity ( )

Скопировать ссылку «opacity()» Скопировано

Меняет прозрачность изображения. Можно указать процент прозрачности от 0% до 100%. 0% делает картинку полностью прозрачной. 100% не меняет прозрачность изображения. Отрицательные значения или значения больше 100% не допускаются.

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

 img  filter: opacity(40%);> img  filter: opacity(40%); >    Скопировать Скопировано Не удалось скопировать   

saturate ( )

Скопировать ссылку «saturate()» Скопировано

Меняет насыщенность цветов изображения. Значение 0% полностью убирает насыщенность цветов. Значение 100% не изменяет исходное изображение. Допускаются значения больше 100% что приводит к перенасыщенности. Нельзя указать отрицательное значение.

 img  filter: saturate(390%);> img  filter: saturate(390%); >    Скопировать Скопировано Не удалось скопировать   

sepia ( )

Скопировать ссылку «sepia()» Скопировано

Меняет цвета изображения на сепию — коричневые оттенки. Значение 100% полностью преобразует изображение в сепию. Значение 0% не изменяет исходное изображение. Отрицательные значения или значения больше 100% не допускаются. Можно использовать целое или дробное число без единиц измерения в качестве значения.

 img  filter: sepia(0.6);> img  filter: sepia(0.6); >    Скопировать Скопировано Не удалось скопировать   

Все фильтры сразу

Скопировать ссылку «Все фильтры сразу» Скопировано

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

На практике

Скопировать ссылку «На практике» Скопировано

Елена Соколовская советует

Скопировать ссылку «Елена Соколовская советует» Скопировано

🛠 С помощью drop — shadow ( ) мы можем создать тень по форме самого изображения. Функция учитывает альфа-канал картинки и способна отбрасывать не только прямоугольную тень, как в случае с box — shadow .

 .box-shadow  box-shadow: 4px 4px 10px red;>.drop-shadow  filter: drop-shadow(4px 4px 10px red);> .box-shadow  box-shadow: 4px 4px 10px red; > .drop-shadow  filter: drop-shadow(4px 4px 10px red); >    Скопировать Скопировано Не удалось скопировать   

Источник

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

Всем привет вчера выполняя задачу натолкнулся на одно очень интересное решение.

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

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

Решением оказалась функция invert свойства filter

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

       img  

Как видите у меня в корневой папке есть изображение с названием icon и рассширением jpg к которому я применил функцию invert свойства filter. Цвета которые и меня присутствовали на картинке, а именно черный и белый заменились на противоположные( черный стал белым, а белый стал черным)

И это здорово потому что если теперь понадобиться динамически менять цвета например при наведении (hover), то достаточно будет воспользоватьcя данной функцией и никаких дополнительных картинок и спрайтов нам не понадобится.

       img < filter:invert(1); cursor:pointer; >img:hover  

Можете попробовать и на фотографиях, но там эффект совершенно другой, примерно как на рентгеновских снимках.

Вот и все дорогие друзья что я вам хотел рассказать инвертирование цветов с помощью css.

Оцените статью:

Статьи

Комментарии

Внимание. Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm

Добавить приложение на рабочий стол

Источник