filter в CSS


Содержание

Filter CSS 3 – фильтры изображений

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

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

Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Скачать файл-заготовку можно по этой ссылке.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут.

1. Фильтр размытие — blur

Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

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

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость — brightness

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

А вот и наш подопытный конь:

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% — оригинальным, а при 200% — станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность — contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% — это значение по умолчанию. 0% — черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

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

4. Фильтр насыщенность — saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение — 200%. Повысим насыщенность нашей картиночки в 2 раза.

Море стало заметно приятнее:

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??

5. Фильтр прозрачность — opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

Посмотрите, что вышло:

6. Фильтр Инверсия — invert

Он позволяет вам «переворачивать» цвета. На значения данного фильтра также вводятся ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

В нашем случае установим максимальное значение — 100 %:

И красивая спортивная машина лёгким движением руки превращается в.

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия — sepia

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

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Ну что? Попробуемс?

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.

В нашем случае мы указали дробное значение — 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого — grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 — к 100%.

Зададим значение — 0.7 (или 70%):

9. Фильтр оттенок освещения — hue-rotate

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

Мы зададим значение — 300 градусов:

Ну и кто здесь говорил, что розовых обезьян не бывает?

10. Фильтр тень — drop-shadow

Фильтр задается сразу несколькими значениями. Сначала мы задаем значение по оси X, потом — по оси Y. Так мы обозначаем смещение тени по оси X и Y. Далее указывается радиус нашей тени и последним атрибутом — ее цвет.

В нашем случае укажем смещение тени на 3 пикселя, размер 5 и цвет тёмно-серый.

Обратите внимание, за счёт тени создается впечатление, будто вторая картинка приподнята.

Кстати, в самом видео-уроке мы не только разбирали все эти свойства, но и учились делать анимацию. И в нём создавали эффект поднятия картины при наведении. В Демо есть пример

PS: Друзья, если Вы хотите полностью изучить HTML5 и CSS3, и научиться верстать классные сайты – записывайтесь на тренинг Верстаем на 5+

Там вас ждем много интересных фишек и секретов по созданию сайтов. Будет интересно!

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

Ниче себе! Спасибо Серж!)

Как всегда — круто! Очень полезно! Спасибо!

И тут же я решил проверить действие фильтра в разных браузерах.

Подопытными кроликами стали:

Pale Moon (Версия 25.2.1 (x64))

Comodo Dragon (Версия 36.1.1.21)

Opera (Версия 27.0)

Vivaldi (Версия 1.0.83.38)

и Internet Explorer (Версия 11 не обновлял давно).

Разочаровал мой любимый Pale Moon. Кроме drop-shadow не работала ни одна картинка. Да и то без отбрасывания тени. И это учитывая, что Pale Moon разработан на основе FireFox. Может с настройками у меня что-то не в порядке ?

Comodo Dragon все показал как надо — чем и порадовал.

Opera тоже блестнула. Всё абсолютно без нареканий.

Vivaldi удивил. Картинки (все) сначала пропадали вовсе, а потом появлялись уже с готовым эффектом (примерно через секунду). Полагаю, что, отколовшись от Opera , Vivaldi пишут с какими-то новыми прибабахами о которых я не знаю. Ну и ладно. Не о браузерах речь.

Internet Explorer отработал полностью Pale Moon —но подобным образом. Т.е. почти никак.

Мои скромный вывод: разработчики браузеров со временем выпустят новые версии где всё будет работать, а мы используем действие фильтра на полную катушку.

За сим разрешите мне завершить свой пост.

Спасибо Серёга.За время знакомства с тобой, я получил действительно много полезного контента. Но самое главное, что в наше быстротечное время, с кучей информации, твоя полезна своей новизной и важностью.Если ты предлагаешь обратить на, что то внимание, значит это самая современная тенденция.Не исключение изучение РЕЬД-5 и CSS-3 Спасибо.

Провёл проверку в Safari браузере(IPad 2). Всё прекрасно работает! Версия браузера последняя на данный момент

«Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. grin Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно. «. Ага будем использовать методы которые жрут cpu, и оперативку(а если акселерация у браузера то оперативку x2)

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

Редактирование изображений в CSS: Фильтры

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

Фильтры CSS предоставляют простой способ решения этой задачи. Давайте кратко рассмотрим все доступные фильтры.

Фильтр blur

Этот фильтр применяет к изображениям гауссово размытие. Фильтр принимает значение length, которое определяет, сколько пикселей нужно смешать друг с другом. Большее значение даст большее размытие. Радиус размытия нельзя указывать в процентах. Если значение не указано, по умолчанию используется радиус 0. Синтаксис этого фильтра:

Фильтр blur() не принимает отрицательных значений.

Фильтр brightness

Этот фильтр применяет к изображениям линейный множитель, делая их ярче или тусклее по сравнению с оригинальным изображением. Он принимает как числовое, так и процентное значение. При 0% вы получите полностью черное изображение, на 100% вы получите исходное изображение без каких-либо изменений. Более высокие значения приведут к более ярким изображениям. Достаточно высокое значение сделает изображение практически белым. Синтаксис этого фильтра:

Фильтр не принимает отрицательных значений.

Фильтр contrast

Этот фильтр изменяет контрастность изображения. Также как фильтр brightness, он принимает как число, так и процентное значение. При 0% результат будет полностью серым, значение 100% не даст никакого эффекта, значения больше 100% сделают изображение более контрастным. В фильтр contrast() нельзя передавать отрицательные значения. Синтаксис фильтра:

Фильтр box-shadow

Почти все уже использовали свойство box-shadow хотя бы раз. Проблема box-shadow в том, что оно применяется к блоку, с помощью него нельзя создать тень произвольной формы. Фильтр drop-shadow создает тень вокруг изображения. Это в основном размытая версия альфа-маски основного изображения. Синтаксис фильтра:

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

Фильтр grayscale

Этот фильтр делает изображение черно-белым. Значение 0% в качестве параметра не изменит изображение, значение 100% сделает его полностью черно-белым. Значение между 0% и 100% задает степень применения этого эффекта. Фильтр grayscale() не принимает отрицательных значений. Синтаксис фильтра:

Фильтр hue-rotate

Фильтр применяет к изображению поворот оттенка. Параметр фильтра определяет угол на цветовом круге, на который должно быть повернуто изображение. При 0deg изображение не будет изменено, при 360deg фильтр сделает полный оборот. Синтаксис фильтра:

Фильтр invert

Фильтр инвертирует изображение. Величину инверсии определяет переданный параметр. При 0% мы получим то же изображение без изменений, при 100% — полностью инвертированное изображение, при 50% — полностью серое изображение. Любое значение между 0% и 100% будет означать степень инверсии. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Илон Маск рекомендует:  Что такое код ocilogon

Фильтр opacity

Фильтр opacity применяет прозрачность к исходному изображени. Значение параметра 0% сделает изображение полностью прозрачным, 100% — полностью непрозрачным.

Фильтр похож на свойство opacity в CSS. Разница в том, что для фильтра некоторые браузеры могут использовать аппаратное ускорение для увеличения производительности. Синтаксис фильтра:

Фильтр saturate

Этот фильтр изменяет насыщенность изображения. Насыщенность задается передаваемым параметром. Фильтр не принимает отрицательные значения. При 0% (минимальное допустимое значение) изображение становится полностью не насыщенным, при 100% — получаем исходное изображение. Чтобы получить более насыщенное изображение, необходимо передать значение, большее 100%. Синтаксис:

Фильтр sepia


Фильтр преобразует оригинальное значение в сепию. Значение параметра 100% полностью преобразует изображение, 0% не даст никакого эффекта. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Фильтр url

Могут возникнуть случаи, когда вам понадобится применить собственные фильтры к изображению. Фильтр url позволяет применить произвольный SVG фильтр. В качестве параметра фильтр принимает как путь к файлу с фильтром, так и идентификатор элемента на странице. Пример постеризации изображения:

Результат применения этого фильтра:

Применение нескольких фильтров

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

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

В некоторые случаях разный порядок фильтров может приводить к совершенно разному результату. Например, использование sepia() после grayscale() преобразует изображение в сепию, а использование grayscale() после sepai() сделает его черно-белым.

Анимация фильтров

Свойство filter может быть анимировано. При правильном сочетании из0ображения и фильров можно добиться потрясающих результатов. Рассмотрим фрагмент кода ниже:

Я использовал фильтры hue-rotate() и brightness() вместе, чтобы добиться эффекта дня и ночи. На 20% анимации я увеличиваю яркость, оставляя оттенок без изменения, чтобы создать эффект солнечного дня. К конце анимации я поворачиваю оттенок на 180 градусов. В результате получаю синее изображение. В сочетании с очень низкой яркостью, это создает эффект ночи.

Заключение

Помимо 11-ти фильтров, о которых мы говорили выше, существует также фильтр custom(). Он позволяет создавать совершенно разные эффекты с помощью шейдеров. Есть несколько проблем с этим фильтром, которые приостановили его развитие. Компания Adobe активно работает, чтобы придумать решения этих проблем. Надеюсь, скоро фильтр custom() можно будет использовать в своих проектах.

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

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

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

CSS свойство filter grayscale на практике

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

На сегодняшний день существует 10 различных фильтров, но мы с вами рассмотрим только один – grayscale. Остальные фильтры можно применять по аналогии.

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

filter: grayscale(1); /* где 1 – оттенки серого цвета */

У нас будет следующая HTML структура: Создаем большой серый блок-контейнер с классом img-wrap, куда помещаем три блока .holder с фотографиями с классом img-1.

HTML код целиком:

Блоки с фотографиями встали в ряд, благодаря float:

Как вы видите на первом скриншоте, для примера используются фотографии разного размера. Как сделать так, чтобы визуально они выглядели одинаковыми, без правок в графическом редакторе? Надо задать нужные вам размеры блока с картинкой, а что не помещается в блок holder, спрятать overflow: hidden.

.holder <
width: 200px;
height: 200px;
overflow: hidden;
>

Чтобы наши барышни не выглядели, как на «доске почета», скруглим углы блока.

Изменим правила расчета ширины и высоты серого блока-контейнера. Что это значит? По умолчанию к размерам контента прибавляются ещё и размеры отступов, полей и бордюров. Но мы говорим, что не надо учитывать их при расчете ширины и высоты блока. Иными словами, если мы задаем ширину серого блока 780 пикселей, то никакие поля этот размер не изменят.

Давайте посмотрим на полученный блок с фотографиями с точки зрения дизайна. Сейчас на сером фоне мы видим три разноцветных пятна, это выглядит безвкусно, нет никакой гармонии с фоном. Простыми строчками в файле стилей, сделаем картинки черно-белыми. Для этого применим наконец-то CSS filter grayscale с максимальным значением (1) или (100%).

.holder .img-1 <
filter: grayscale(1); /* где 1 – оттенки серого цвета */
transition: 0.5s ease-in-out;
>

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

.holder:hover .img-1 <
filter: grayscale(0); /* 0 – исходное цветное изображение */
transition: 0.5s ease-in-out; /* плавная смена оттенка */
>

Данный эффект с применением filter grayscale можно увидеть на демо.

Поддержка в браузерах

Не поддерживают старые браузеры, а также все версии IE. Chrome с 49 по 62 версии требует добавления префикса «-webkit-«.

CSS код целиком:

#img-wrap <
background: #ccc;
margin: 40px auto;
width: 780px;
height: 270px;
padding: 20px;
box-sizing: border-box;
>

.holder <
width: 200px;
height: 200px;
margin: 20px;
float: left;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
border: 2px solid #868383;
>

/* black and white hover effect */
.holder .img-1 <
filter: grayscale(1);
-webkit-filter: grayscale(1);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
>

.holder:hover .img-1 <
filter: grayscale(0);
-webkit-filter: grayscale(0);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 2 ):

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

    люблю лаконичный код. filter: grayscale(1);

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    CSS свойство filter

    Свойство filter позволяет применить различные художественные эффекты к элементам. Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.

    CSS синтаксис

    Возможные значения

    Добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

    Параметры:

    x-сдвиг — Обязательный параметр. Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево.

    y-сдвиг — Обязательный параметр. Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх.

    размытие — Необязательный параметр. Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.

    цвет — Необязательный параметр. Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.

    При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color.

    Значение Описание
    none Значение по умолчанию. Эффекты не применяются.
    blur(px) Задаёт размытие по Гауссу изображений, фоновых картинок или текста. Чем больше значение, тем сильнее эффект размытия. Если значение не указано, то используется значение 0.
    brightness(%) Понижает или повышает яркость изображений или фоновых картинок. 0% сделает избражение полностью черным, 100% — значение по умолчанию и представляет оригинальное изображение. Значения больше 100% увеличивают яркость изображения.
    contrast(%) Понижает или повышает контрастность изображений или фоновых картинок. Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают контрастность изображения. При этом 0 даёт однотонную серую картинку. Значения больше 100% (или больше 1) повышают контрастность изображения. Отрицательное значение не допускается. Пустое значение воспринимается как 1
    drop-shadow(x-сдвиг y-сдвиг размытие цвет)
    grayscale(%) Преобразует цвета изображения в граации серого. 0% (или 0) — значение по умолчанию, представляющее исходное изображение. 100% (или 1) сделает изображение полностью черно-белым. Отрицательные значения запрепщены.
    hue-rotate(градус) Применяет к изображению цветовой сдвиг. В качестве значения указывается угол (к примеру: 45deg), который задаёт поворот оттенка на цветовом круге. Минимальное значение 0, максимальное 360 градусов.
    invert(%) Инвертирует цвета в изображении. По результату данный фильтр схож с преобразованием изображения в негатив. 0% (или 0) — значение по умолчанию, представляющее исходное изображение. 100% (или 1) — полная инверсия цветов изображения. Отрицательные значения запрепщены.
    opacity(%) Устанавливает степень прозрачности изображения. Похож на свойство opacity, однако некоторые браузеры для фильтров применяют аппаратное ускорение, чтобы повысить их производительность. 0% (или 0) — изображение полностью прозрачно. 100% (или 1) — значение по умолчанию, представляющее исходное изображение (прозрачность осутствует). Отрицательные значения запрещены.
    saturate(%) Изменяет насыщенность цветов в изображении. Значение 0% (или 0) полностью убирает насыщенность цветов в изображении, превращая его в чёрно-белое. Значение 100% (или 1) оставляет изображение неизменным. Любые значения больше 100% или больше 1 делают цвета в изображении более насыщенными. Отрицательные значения запрепщены.
    sepia(%) Преобразует изображение в сепию (чёрно-белое изображение с коричневым оттенком). Сепия придаёт фотографиям старинный вид. 0% (или 0) — значение по умолчанию, представляющее исходное изображение. 100% (или 1) — полностью превращает изображение в сепию. Отрицательные значения запрепщены.
    url(URL) Функция url() принимает в качестве параметра ссылку на XML файл, определяющий SVG фильтр. При этом может включать анкор, указывающий на элемент фильтра. Например, filter: url(svg-url#element-id).
    inherit Значение наследуется от родительского элемента.
    initial Устанавливает значение по умолчанию.

    Пример

    Изменить цвет всех изображений на черно-белый (100% градации серого)

    Vavik 96

    Интернет дайджест для вебмастеров и фотографов

    Фильтры CSS

    Фильтры (такие, как blur CSS ) – это мощный инструмент, который можно использовать для создания различных визуальных эффектов. Свойство CSS filter позволяет применять к элементу такие эффекты, как размытие или смещение цветов. Фильтры обычно используются для настройки выводимого изображения, фона или рамки.

    Синтаксис:

    В свойстве может быть использована одна или несколько функций:

    • blur() ;
    • brightness() ;
    • contrast() ;
    • drop-shadow() ;
    • grayscale() ;
    • hue-rotate() ;
    • invert() ;
    • opacity() ;
    • saturate() ;
    • sepia() ;
    • url() – для применения SVG-фильтров ;
    • custom() – будет реализована в ближайшее время.

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

    Пример применения CSS filter blur :

    Пример применения нескольких фильтров:

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

    Чтобы использовать свойство, необходимо указать значение для одной из функций, перечисленных выше. Если значение является недействительным, то функция возвращает “ none “. За исключением отдельных случаев, функции, которые принимают значение в процентах (например, 34%), также принимают численные значения, заданные десятичной дробью.

    Ниже мы применим множество различных функций фильтров к изображению (в том числе и для создания CSS blur effect ):

    grayscale()

    Преобразует входящее изображение в оттенки серого. Значение 100% – полностью в оттенках серого, 0% – оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Если параметр не задан, используется значение по умолчанию – 100%. Отрицательные значения не допускаются.

    sepia()

    Преобразует входящее изображение в сепию. Значение 100% – полное применение сепии. Значение 0 оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Если параметр не задан, используется значение по умолчанию – 100%. Отрицательные значения не допускаются.

    saturate()

    Увеличивает насыщенность цветов входящего изображения. Значение 0% полностью обесцвечивает изображение. Значение 100% оставляет исходное изображение без изменений. Другие значения являются линейными коэффициентами применения эффекта. Допускаются значения больше 100%, это приводит к перенасыщению цветов. Если параметр отсутствует, используется значение по умолчанию -100%. Отрицательные значения не допускаются (как и в blur image CSS ).

    hue-rotate()

    Применяет к входящему изображению смещение цветовых тонов. Значение “ angle ” определяет количество градусов по круговой диаграмме цветов, на которое будут скорректированы цвета исходного изображения. Значение 0 градусов оставляет исходное изображение без изменений. Если параметр “ angle ” не задан, используется значение 0. Максимальное значение 360 градусов.

    invert()

    Инвертирует цвета исходного изображения. Значение 100% полностью инвертирует цвета, 0% -оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Если параметр не задан, используется значение – 100%. Отрицательные значения не допускаются.

    opacity()

    Задает непрозрачность входящего изображения. Значение 0% задает полную прозрачность изображения,100% – оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Это эквивалентно умножению образцов цветов исходного изображения на заданное значение. Если параметр отсутствует, используется значение 100%.

    Эта функция аналогична более традиционному свойству opacity. Разница заключается в том, что некоторые браузеры применяют для фильтров аппаратное ускорение. Отрицательные значения не допускаются (как и в blur image CSS ).

    brightness()

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

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

    Фильтр создает эффект blur CSS , применяя к входящему изображению размытие по Гауссу . Значение ” radius ” определяет значение стандартного отклонения функции Гаусса, или то, сколько пикселей на экране смешиваются друг с другом. Большее значение на выходе дает большее размытие. Если параметр не установлен, то используется значение 0. Параметр задается как длина CSS , но не принимает процентных значений.

    drop-shadow()

    Применяет к входящему изображению эффект тени. Фильтр создает размытую, смещенную версию входящего изображения с альфа-маской определенного цвета, которая выводится под изображением. Функция принимает параметр type (определен в CSS3 Backgrounds ). Ключевого слова “ inset ” не допускается.

    Эта функция аналогична более традиционному свойству box-shadow . Разница заключается в том, что некоторые браузеры применяют для фильтров аппаратное ускорение.

    Кроме этого drop-shadow полностью повторяет очертания объекта, отбрасывающего тень. В отличие от свойства box-shadow , которое повторяет только контур панели.

    Так же, как text-shadow , функция не поддерживает параметр “ spread ” для создания тени больше объекта.

    Функция url() принимает место размещения файла XML , который определяет SVG-фильтр (в том числе и для CSS filter blur ), и может включать в себя анкор для конкретного элемента фильтра.

    Анимация фильтров

    Поскольку фильтры могут быть анимированы, это дает нам возможность разнообразить дизайн ресурса.

    Примечания

    Вы можете объединять любое количество функций для управления отображением, но их порядок при этом имеет значение. Например, использовав grayscale() после sepia() , и дополнительно обработав blur CSS . На выходе вы получите полностью серое изображение.

    Передаваемое значение (кроме “none” ) определяет, как контекст укладывается в стек, таким же образом, как работает непрозрачность CSS . Свойство filter не оказывает никакого влияния на геометрию поля целевого элемента, хотя фильтры могут задавать вывод различных эффектов за пределами границ поля элемента. Фильтры применяются ко всем частям целевого элемента. В том числе: к контенту, фону, рамкам, оформлению текста, контуру и видимому механизму прокрутки.


    В спецификации также определена функция filter ( image-URL, filter-functions ), оборачивающая функцию для изображений. Она позволяет применять фильтры к изображениям, которые используются в CSS . Например, можно размыть фоновое изображение, не применяя CSS blur background (размытие) к самому тексту. Эта функция еще не поддерживается в браузерах. Но чтобы создать такой эффект, можно применить фон и фильтр к псевдо-элементу.

    Фильтры для IE

    Свойство filter также используется следующим образом:

    В основном используется для непрозрачности, когда необходимо добавить поддержку в IE 8 и ниже.

    Перевод статьи «filter» был подготовлен командой проекта Сайтостроение от А до Я.

    Онлайн генератор CSS фильтров для изображений

    CSS фильтр: Оттенки серого

    CSS фильтр: Сепия

    CSS фильтр: Смещение цвета

    CSS фильтр: Инвертирование цвета

    CSS фильтр: Контраст

    CSS фильтр: Размытие

    CSS фильтр: Якрость

    CSS фильтр: Насыщенность

    CSS фильтр: Прозрачность

    CSS фильтр: Тень

    CSS фильтр: ALL

    ОНЛАЙН ГЕНЕРАТОР CSS ФИЛЬТРОВ ДЛЯ ИЗОБРАЖЕНИЙ

    Для того чтобы упростить представление работы css свойства «filter» вы можете воспользоваться онлайн генератором. В левой и правой колонках представлены все 10 вариаций фильтров, кроме того на верхней панели можно переключить центральный вид на одновременное применение всех фильтров. В общем случае после выбора необходимого вам свойства, в центральной колонке будет отображен блог с изображением, ползунком и поле с кодом. Изменяя значения фильтра с помощью ползунка вы тут же сможете увидеть как будет выглядеть тот или иной фильтр, код также будет реагировать на движение ползунка и его можно скопировать сразу же после достижения нужного результата.

    Формат изображения* — формат изображения для которого применяется фильтр.

    Параметры вставки фильтра* — выбор как будет загружен фильтр на страницу.

    Активировать все фильтры — открывается вид с ползунками для каждого фильтра. Фильтры будут применены одновременно.

    Перезагрузка — сброс всех параметров.

    * — В будущем будут добавлены варианты для изменения и этих параметров.

    Общая информация о свойстве CSS — Filter

    CSS свойство filter позволяет манипулировать цветом изображения путём наложения на него различных фильтров, таких как сепия, оттенки серого, насыщенность и т.д. Так как свойство введено относительно недавно (первое описание стандарта от 25 октября 2012) его не поддерживают старые браузеры, в том числе вся линейка Internet Explorer.

    Поддержка CSS свойства filter в разных браузерах:

    • Не совместимо с IE. Подробнее о возможной совместимости — Microsoft Library.
    • Edge — не поддерживается url.
    • Chrome с 58 до 49 версии и Android Browser в Android 4.4 и 4.4.4 требуют добавления префикса «-webkit-«.

    Описание значений свойства filter

    BLUR — Размытие

    Возможные величины: длина (px,rem,vw,vh и т.д.).

    Диапазон: 0 — ∞; где ноль исходное изображение.

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

    Пример: filter: blur(10px);

    BRIGHTNESS — Яркость

    Возможные величины: число, проценты.

    Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

    Описание: Увеличение и снижение яркости. При величине меньше единицы или 100% изображение будет темнеть (в нуле чёрное), при значениях больше единицы или 100% изображение будет становиться ярче.

    Пример: filter: brightness(0.2);

    CONTRAST — Контраст

    Возможные величины: число, проценты.

    Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

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

    Пример: filter: contrast(200%);

    DROP-SHADOW — Тень

    Возможные величины: Длина и цвет для тени.

    Диапазон: любое значение для первых двух параметров смещения; 0 — ∞, для параметра размытия, где 0 — отсутствие размытия.

    Описание: Тень для изображения, необходимо задать два первых параметра длины для смещения тени по оси координат (x,y), третий параметр задаёт размытие/прозрачность тени (третий параметр не должен быть меньше нуля). Последний параметр — цвет тени (стандартное значении цвета при его отсутствии разнится в зависимости от браузера, например в Chrome оно равно — #1a1a1a ). Порядок в спецификации задан следующим образом: 1 — смещение по оси X; 2 — смещение по оси Y; 3 — размытие; 4 — цвет тени. При этом браузеры также активируют свойство если цвет тени задать в самом начале — перед смещением по оси абсцисс (Х). Значение равнозначны с css свойством ‘box-shadow’.

    Пример: filter: drop-shadow(20px -20px 10px #000);

    GRAYSCALE — Оттенки серого

    Возможные величины: число, проценты.

    Диапазон: 0 — 1, 0%-100%;где 0 или 0% — оригинальное изображение.

    Описание: Увеличение и снижение количество цветов на изображении.

    Пример: filter: grayscale(0.2);

    HUE-ROTATE — Смещение цвета

    Возможные величины: угловые (градусы, радианы)

    Диапазон: любое значение ; где 0 или 360deg — оригинальное изображение.

    Описание: Действие основано на замене текущего цвета, на цвет который будет получен при смещении на заданный угол по цветовому кругу. Например, синий цвет при смещении угла в 90 градусов — filter: hue-rotate(90deg), сменится на салатовый, а при значении 180deg смениться на жёлтый.

    CSS фильтр Hue-rotate — схема смещения на 120deg,
    в результате цвет #007bff будет заменён на #7dfc04

    Пример: filter: hue-rotate(180deg);

    INVERT — Инвертирование цвета

    Возможные величины: число, проценты.

    Диапазон: 0 — 1 , 0%-100%; где 0 или 0% — оригинальное изображение.

    Описание: Инвертирование цвета (например, с чёрного в белый), 0 — оригинальное изображение, 1 или 100% полностью инвертированное. В середине процесса инвертирования (0.5 или 50%) изображение становится полностью серым.

    Пример: filter: invert(90%);

    Opacity — Прозрачность

    Возможные величины: число, проценты.

    Диапазон: 0 — 1 , 0%-100%; где 1 или 100% — оригинальное изображение.

    Описание: Прозрачность. Разница между обычным свойством ‘opacity’ в том, что фильтр можно наложить совместно с другими фильтрами при этом не получить умножение прозрачности для всего блока. Свойство opacity: 0.5 и filter: opacity(0.5) без примесей других модификаторов — равнозначны, но при этом применённые к одному блоку не дадут ему полную прозрачность. (Можете попинать в комментариях в более правильном направлении).

    Пример: filter: opacity(0.7);

    Saturate — Насыщенность

    Возможные величины: число, проценты.

    Диапазон: 0 — ∞, 0%-∞%; где 1 или 100% — оригинальное изображение.

    Описание: Увеличение и снижение насыщенности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле будут использованы только оттенки серого, равнозначно grayscale(1) ), при значениях больше единицы или 100% на изображении будет увеличиваться насыщенность цветов.

    Пример: filter: saturate(0.7);

    SEPIA — Сепия

    Возможные величины: число, проценты.

    Диапазон: 0 — 1, 0%-100%; где 0 или 0% — оригинальное изображение.

    Описание: Имитация выцветшей фотографии (эффект старины). На 100% или 1, в изображении будут использованы только оттенки коричневого (светло-коричневого) цвета.

    Пример: filter: sepia(100%);

    Редактирование изображений в CSS: Фильтры

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

    Фильтры CSS предоставляют простой способ решения этой задачи. Давайте кратко рассмотрим все доступные фильтры.

    Фильтр blur

    Этот фильтр применяет к изображениям гауссово размытие. Фильтр принимает значение length, которое определяет, сколько пикселей нужно смешать друг с другом. Большее значение даст большее размытие. Радиус размытия нельзя указывать в процентах. Если значение не указано, по умолчанию используется радиус 0. Синтаксис этого фильтра:

    Фильтр blur() не принимает отрицательных значений.

    Фильтр brightness

    Этот фильтр применяет к изображениям линейный множитель, делая их ярче или тусклее по сравнению с оригинальным изображением. Он принимает как числовое, так и процентное значение. При 0% вы получите полностью черное изображение, на 100% вы получите исходное изображение без каких-либо изменений. Более высокие значения приведут к более ярким изображениям. Достаточно высокое значение сделает изображение практически белым. Синтаксис этого фильтра:

    Фильтр не принимает отрицательных значений.

    Фильтр contrast

    Этот фильтр изменяет контрастность изображения. Также как фильтр brightness, он принимает как число, так и процентное значение. При 0% результат будет полностью серым, значение 100% не даст никакого эффекта, значения больше 100% сделают изображение более контрастным. В фильтр contrast() нельзя передавать отрицательные значения. Синтаксис фильтра:

    Фильтр box-shadow

    Почти все уже использовали свойство box-shadow хотя бы раз. Проблема box-shadow в том, что оно применяется к блоку, с помощью него нельзя создать тень произвольной формы. Фильтр drop-shadow создает тень вокруг изображения. Это в основном размытая версия альфа-маски основного изображения. Синтаксис фильтра:

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

    Фильтр grayscale

    Этот фильтр делает изображение черно-белым. Значение 0% в качестве параметра не изменит изображение, значение 100% сделает его полностью черно-белым. Значение между 0% и 100% задает степень применения этого эффекта. Фильтр grayscale() не принимает отрицательных значений. Синтаксис фильтра:

    Фильтр hue-rotate

    Фильтр применяет к изображению поворот оттенка. Параметр фильтра определяет угол на цветовом круге, на который должно быть повернуто изображение. При 0deg изображение не будет изменено, при 360deg фильтр сделает полный оборот. Синтаксис фильтра:

    Фильтр invert

    Фильтр инвертирует изображение. Величину инверсии определяет переданный параметр. При 0% мы получим то же изображение без изменений, при 100% — полностью инвертированное изображение, при 50% — полностью серое изображение. Любое значение между 0% и 100% будет означать степень инверсии. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

    Фильтр opacity

    Фильтр opacity применяет прозрачность к исходному изображени. Значение параметра 0% сделает изображение полностью прозрачным, 100% — полностью непрозрачным.

    Фильтр похож на свойство opacity в CSS. Разница в том, что для фильтра некоторые браузеры могут использовать аппаратное ускорение для увеличения производительности. Синтаксис фильтра:

    Фильтр saturate

    Этот фильтр изменяет насыщенность изображения. Насыщенность задается передаваемым параметром. Фильтр не принимает отрицательные значения. При 0% (минимальное допустимое значение) изображение становится полностью не насыщенным, при 100% — получаем исходное изображение. Чтобы получить более насыщенное изображение, необходимо передать значение, большее 100%. Синтаксис:

    Фильтр sepia

    Фильтр преобразует оригинальное значение в сепию. Значение параметра 100% полностью преобразует изображение, 0% не даст никакого эффекта. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

    Фильтр url

    Могут возникнуть случаи, когда вам понадобится применить собственные фильтры к изображению. Фильтр url позволяет применить произвольный SVG фильтр. В качестве параметра фильтр принимает как путь к файлу с фильтром, так и идентификатор элемента на странице. Пример постеризации изображения:

    Результат применения этого фильтра:

    Применение нескольких фильтров


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

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

    В некоторые случаях разный порядок фильтров может приводить к совершенно разному результату. Например, использование sepia() после grayscale() преобразует изображение в сепию, а использование grayscale() после sepai() сделает его черно-белым.

    Анимация фильтров

    Свойство filter может быть анимировано. При правильном сочетании из0ображения и фильров можно добиться потрясающих результатов. Рассмотрим фрагмент кода ниже:

    Я использовал фильтры hue-rotate() и brightness() вместе, чтобы добиться эффекта дня и ночи. На 20% анимации я увеличиваю яркость, оставляя оттенок без изменения, чтобы создать эффект солнечного дня. К конце анимации я поворачиваю оттенок на 180 градусов. В результате получаю синее изображение. В сочетании с очень низкой яркостью, это создает эффект ночи.

    Заключение

    Помимо 11-ти фильтров, о которых мы говорили выше, существует также фильтр custom(). Он позволяет создавать совершенно разные эффекты с помощью шейдеров. Есть несколько проблем с этим фильтром, которые приостановили его развитие. Компания Adobe активно работает, чтобы придумать решения этих проблем. Надеюсь, скоро фильтр custom() можно будет использовать в своих проектах.

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

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

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

    Фильтры в CSS

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

    Поддержка браузеров

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

    Числа с приставкой -webkit- указывают первую версию, которая работала с приставкой.

    Chrome Firefox IE Opera Safari
    18.0 -webkit- 35.0 Не поддерживается 15.0 -webkit- 6.0 -webkit-

    Синтаксис

    none — Значение по умолчанию. Не указывает, никаких эффектов

    blur(px) — К изображению применяется эффект размытия . Большее значение будет создавать больше размытия .По умолчанию используеться значение 0 .

    Пример

    brightness(%) — Регулировка яркости изображения .0% делает изображение полностью черным .100% является по умолчанию и представляет собой исходное изображение.Значения более 100% обеспечит более яркие результаты.

    Пример

    contrast(%) — Регулировка контрастности изображения.0% делает изображение полностью черным.100% является по умолчанию и представляет собой исходное изображение. Значения более 100% обеспечит результаты с меньшим количеством контраста.

    Пример

    drop-shadow(h-shadow v-shadow blur spread color) — Применяется эффект тени к изображению.

    Возможные значения:

  • h-shadow — Обязательно. Задает значение пикселя для горизонтальной тени. Отрицательные значения поместить тень слева от изображения.
  • v-shadow — Обязательно. Задает значение пикселя для вертикальной тени. Отрицательные значения поместите тень над изображением.
  • blur — необязательно. Это третье значение, и должно быть в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать больше размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (край теневой является резкое).
  • spread — Необязательно. Это четвертое значение, и должно быть в пикселях. Положительные значения заставит тень расширяться и расти больше, а отрицательные значения приведет тень сокращаться. Если не указано, то будет 0 (тень будет иметь тот же размер, как элемент).
  • color — необязательно. Добавляет цвет тени. Если не указано, цвет зависит от браузера (часто черного цвета).

    Пример

    grayscale(%) — Преобразование изображения в оттенках серого.0% по умолчанию , и представляет собой исходное изображение.100% сделает изображение полностью серый (используется для черно-белых изображений ).

    Пример

    hue-rotate(deg) — Применяется поворот цветового тона на изображении. Значение определяет какое количество градусов вокруг цветового круга будет скорректирован. 0deg по умолчанию , и представляет собой оригинальное изображение.

    Пример

    invert(%) — Инвертирует образцы в изображении.0 по умолчанию , и представляет собой исходное изображение .100% сделает изображение полностью перевернутой.

    Пример

    opacity(%)Устанавливает уровень непрозрачности для изображения.0% является полностью прозрачным. 100% является по умолчанию и представляет собой исходное изображение (без прозрачности).

    Пример

    saturate(%) — Насыщает изображение .0% сделает изображение не — насыщенными.100% по умолчанию и представляет собой исходное изображение.Значения более 100% обеспечивает супер — насыщенные результаты .

    Пример

    sepia(%) — Преобразует изображение в сепии.0% по умолчанию , и представляет собой исходное изображение. 100% делает изображение полностью сепией .

    Пример

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

    CSS свойство filter. Фильтры в CSS

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

    Internet Explorer Chrome Opera Safari Firefox
    13 18 15 6 35
    Android Firefox Mobile Opera Mobile Safari Mobile
    4.4 35 30 6

    Internet Explorer c 4 до 10 версии поддерживает другое нестандартное свойство filter с тем же именем, но другим синтаксисом.

    Chrome, Opera и Safari поддерживают свойство -webkit-filter.

    Краткая информация по CSS-свойству filter

    Значение по умолчанию none
    Наследуется Нет
    Применяется Ко всем элементам
    Анимируется Да

    Правила написания свойства filter

    Здесь none — отменяет действие наложенных фильтров, — применяемый фильтр. Перечислим имеющиеся в нашем распоряжении фильтры:

    Применяет эффект размытия к изображению. Большее значение будет создавать большее размытия. Если значение не указано, используется 0.

    Регулировка яркости изображения. 0% сделает изображение полностью черным. 100% — дефолтное значение и представляет собой исходное изображение. Значение более 100% сделает изображение ярче.

    Регулировка яркости изображения. 0% сделает изображение полностью черным. 100% — дефолтное значение и представляет собой исходное изображение. Значение более 100% сделает изображение более контрастным.

    drop-shadow(x y размытие растяжение цвет)

    Добавляет тень к элементу, аналогичен CSS свойству box-shadow. Поясним значения параметров:

    x, y — обязательные значения, отвечает за смещение тени по горизонтали/вертикали относительно элемента. Положительная величина задает сдвиг тени вправо/вниз, отрицательная — влево/вверх соответственно.

    размытие — третий (необязательный) параметр, задается в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать большее размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (края тени четкие).

    растяжение — необязательный параметр, измеряется в пикселях. Положительное значение заставит тень расширяться, а отрицательное — сжиматься. Если не указано, то будет 0 (тень будет иметь тот же размер, как элемент).

    цвет — необязательный параметр, отвечает за цвет тени. Если не указано, цвет зависит от браузера (часто черного цвета).

    В качестве примера создадим тень красного цвета, которая будет по 8 пикселей в толщину по горизонтали и по вертикали, с размытием, равным 10px:

    Придает картинке оттенки серого цвета. 0% (или 0) – значение по умолчанию, и оно показывает картинку без изменений. 100% (или 1) сделает картинку полностью серой (используется для черно-белых изображений). Отрицательные значения не допустимы.

    Позволяет изменять тон, повернув его (представьте колесо цветов, которые вы поворачиваете), измеряется в градусах. 0deg — минимальное, дефолтное значение; 360deg — максимальное значение.

    Создает инверсию цветов в изображении. 0% (0 – значение по умолчанию, и оно показывает картинку без изменений). 100% сделает цвета картинки полностью обратно-инвертированными. Отрицательные значения не допустимы.

    Устанавливает уровень непрозрачности для изображения, аналогичен CSS свойству opacity. При 0% (или 0 ) изображение полностью прозрачное. 100% (или 1 ) — значение по-умолчанию, при нем изображение непрозрачно. Отрицательные значения не допустимы.

    Насыщает изображение. 0% (или 0 ) сделает изображение полностью ненасыщенными. 100% (или 1 ) — дефолтное значение, представляет собой исходное изображение. Значение более 100% увеличиет насыщенность. Отрицательные значения не допустимы.

    Преобразует изображение в сепию. 0% (или 0 ) — минимальное и дефолтное значение, представляющее собой исходное изображение. Максимальное значение — 100% (или 1 ).

    Функция url() обращается к месту расположения XML-файла, который указывает SVG-фильтр, а также может прикрепляться к одному конкретному элементу фильтра. Например:

    CSS свойство filter grayscale на практике

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

    На сегодняшний день существует 10 различных фильтров, но мы с вами рассмотрим только один – grayscale. Остальные фильтры можно применять по аналогии.

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

    filter: grayscale(1); /* где 1 – оттенки серого цвета */

    У нас будет следующая HTML структура: Создаем большой серый блок-контейнер с классом img-wrap, куда помещаем три блока .holder с фотографиями с классом img-1.

    HTML код целиком:

    Блоки с фотографиями встали в ряд, благодаря float:

    Как вы видите на первом скриншоте, для примера используются фотографии разного размера. Как сделать так, чтобы визуально они выглядели одинаковыми, без правок в графическом редакторе? Надо задать нужные вам размеры блока с картинкой, а что не помещается в блок holder, спрятать overflow: hidden.

    .holder <
    width: 200px;
    height: 200px;
    overflow: hidden;
    >

    Чтобы наши барышни не выглядели, как на «доске почета», скруглим углы блока.

    Изменим правила расчета ширины и высоты серого блока-контейнера. Что это значит? По умолчанию к размерам контента прибавляются ещё и размеры отступов, полей и бордюров. Но мы говорим, что не надо учитывать их при расчете ширины и высоты блока. Иными словами, если мы задаем ширину серого блока 780 пикселей, то никакие поля этот размер не изменят.

    Давайте посмотрим на полученный блок с фотографиями с точки зрения дизайна. Сейчас на сером фоне мы видим три разноцветных пятна, это выглядит безвкусно, нет никакой гармонии с фоном. Простыми строчками в файле стилей, сделаем картинки черно-белыми. Для этого применим наконец-то CSS filter grayscale с максимальным значением (1) или (100%).

    .holder .img-1 <
    filter: grayscale(1); /* где 1 – оттенки серого цвета */
    transition: 0.5s ease-in-out;
    >

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

    .holder:hover .img-1 <
    filter: grayscale(0); /* 0 – исходное цветное изображение */
    transition: 0.5s ease-in-out; /* плавная смена оттенка */
    >

    Данный эффект с применением filter grayscale можно увидеть на демо.

    Поддержка в браузерах

    Не поддерживают старые браузеры, а также все версии IE. Chrome с 49 по 62 версии требует добавления префикса «-webkit-«.

    CSS код целиком:

    #img-wrap <
    background: #ccc;
    margin: 40px auto;
    width: 780px;
    height: 270px;
    padding: 20px;
    box-sizing: border-box;
    >

    .holder <
    width: 200px;
    height: 200px;
    margin: 20px;
    float: left;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #868383;
    >

    /* black and white hover effect */
    .holder .img-1 <
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    >

    .holder:hover .img-1 <
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    >

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 2 ):

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

    люблю лаконичный код. filter: grayscale(1);

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Илон Маск рекомендует:  Чередующиеся квадраты
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL