- Функции фильтров
- Пример
- Как пишется
- blur ( )
- brightness ( )
- contrast ( )
- drop — shadow ( )
- grayscale ( )
- hue — rotate ( )
- invert ( )
- opacity ( )
- saturate ( )
- sepia ( )
- Все фильтры сразу
- Подсказки
- На практике
- Елена Соколовская советует
- Как добавить картинке фильтры. CSS-свойство filter
- К каким элементам применять свойство filter
- Значения CSS-свойства filter
- Наследуется ли свойство filter
- Материалы по теме
- Продвинутые CSS фильтры
- backdrop-filter
- filter()
Функции фильтров
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-свойство filter
CSS-свойство filter добавляет визуальные эффекты к элементам на странице. Например, вы можете поменять цвет, яркость и насыщенность элемента, наложить размытие или изменить прозрачность, инвертировать цвета или сделать что-то ещё.
Всего фильтров девять, и вот как они работают:
К каким элементам применять свойство filter
Свойство filter можно применить к любому элементу с графическим содержимым, например, изображению, видео, тексту или форме. Однако с формами, заголовками и абзацами свойство следует использовать осторожно, оно влияет на внешний вид и читаемость текста. Например, так делать не нужно:
Значения CSS-свойства filter
Значение свойства по умолчанию — none , то есть фильтр не выбран. Чтобы добавить эффект, нужно заменить none на любое из следующих значений.
blur — размытие элемента. Указывается в пикселях: filter: blur(5px) .
brightness — яркость элемента. Принимает значение от 0 до 100% . Например, filter: brightness(50%) уменьшит яркость элемента на 50%.
contrast — контрастность элемента, указывается в процентах. Например, filter: contrast(200%) увеличит контрастность элемента в два раза.
grayscale — оттенки серого. Принимает значение от 0 до 100% . Например, filter: grayscale(100%) сделает фото чёрно-белым.
hue-rotate — меняет оттенок элемента. Принимает значение в градусах. Например, filter: hue-rotate(90deg) повернёт оттенок элемента на цветовом круге на 90 градусов.
invert — инвертирует цвета элемента. Принимает значение от 0 до 100% . Например, filter: invert(90%) инвертирует цвета элемента на 90%.
opacity — прозрачность элемента. Принимает значение от 0 до 100% . Например, filter: opacity(50%) сделает элемент полупрозрачным.
saturate — насыщенность элемента. Принимает значение в процентах. Например, filter: saturate(200%) сделает цвета насыщеннее в два раза.
sepia — создаёт эффект старой фотографии. Принимает значение в процентах, например, filter: sepia(50%) .
Стоит учитывать, что браузеры по-разному поддерживают фильтры, поэтому вёрстка может отличаться на разных браузерах и устройствах. Проверяйте её, тем более, это не очень сложно.
👉 Тем не менее, все браузеры поддерживают свойство filter , так что смело пользуйтесь им, но знайте меру.
Наследуется ли свойство filter
Свойство filter не наследуется от родительских элементов. Нужно явно указывать, к каким элементам на странице применить эффекты. Но если вы добавите filter форме, её поля и подписи к ним станут отображаться с добавленным эффектом.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Продвинутые CSS фильтры
Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop — то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background — тоже фон, но является частью элемента, к нему и относится свойство background.
Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций. В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).
CSS фильтры такие как blur(), contrast() или grayscale() — отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.
Сегодня я хочу пойти чуть дальше, показав новые возможности CSS.
backdrop-filter
В первую очередь — это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).
Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение — это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub — прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.
В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).
С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное — размытие как в iOS:
Каждый элемент за header`ом размыт на 5px. Это так просто.
Живой пример на JSBin (только Safari 9).
для того, чтобы применить backdrop-filter вместе с небольшими корректировками (background-color и позиционирование), чтобы сохранить читаемость header`а в неподдерживаемых браузерах.
backdrop-filter может повысить читаемость текста, наложенного поверх изображения:
Живой пример на JSBin (только Safari 9).
Комбинируя несколько фильтров, вы можете сделать простые графические эффекты, близкие к тем, которые предлагает CSS blend-modes:
Живой пример на JSBin (только Safari 9).
- фон элемента, к которому применен backdrop-filter, должен быть полу-прозрачным. Если нет, то вы никогда не увидите эффект
- есть баг при комбинировании backdrop-filter с любым свойством, которое обрезает элемент (border-radius, mask, clip-path, etc). Это означает, что продвинутые эффекты пока невозможны
- backdrop-filter создает новый контекст наложения, как opacity
- backdrop-filter можно анимировать
- это свойство требует префикс: -webkit-backdrop-filter
- CanIUse
filter()
Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она — вариация background-filter (или background-opacity, background-blur), но она намного мощнее.
Живой пример на JSBin (только Safari 9).
Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.
- есть баг с background-size
- функцию можно анимировать
- функция требует префиксi: -webkit-filter()
Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).
OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.