Продвинутые CSS фильтры. Как размыть фон на css
Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.
Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.
Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.
Видео Filter CSS 3 – фильтры изображений:
Пример страницы, которую мы создаём в уроке:
Скачать файл-заготовку можно по .
Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.
Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.
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% до 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%):
В CSS3 есть множество новых свойств, которые могут значительно ускорить вёрстку тех или иных элементов страницы. Например, css-фильтры, об одном из которых сегодня предлагается поговорить.
Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на странице. Зачастую для его создания используется jQuery-библиотека bjurjs . Однако, не на всех сайтах целесообразно использовать jQuery, да и технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?
Пример простейшей разметки:
Welcome to our website!
Итак, задан родительский div с классом wrapper , служащий контейнером для двух вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur - изображение, к которому нужно применить эффект размытия.
Обратимся к стилям.
Wrapper { position : relative ; width : 500px ; height : 500px ; margin : 0 auto ; } .inner-wrapper , .blur { position : absolute ; width : 500px ; height : 300px ; left : 0 ; top : 0 ; bottom : 0 ; right : 0 ; }
Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на одном уровне. Дело в том, что эффект размытия будет применяться и к тексту приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением блоков относительно друг друга при помощи z-index . Сделаем это, а также зададим необходимый бэкгрануд для.blur:
Inner-wrapper { z-index : 100 ; color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba (0 , 0 , 0 , .5 ); } .blur { z-index : 99 ; background-image : url(image.png) ; background-size : cover ; background-repeat : no-repeat ; }
На данный момент получаем простейшую страничку с картинкой и текстом:
Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:
и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр всего один: тот, что определён под id blur . Вот как должен быть преобразован css-код для получения эффекта размытия:
Inner-wrapper { z-index : 100 ; /* текст не размыт */ color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba (0 , 0 , 0 , .5 ); } .blur { z-index : 99 ; /* изображение размыто */ background-image : url(image.png) ; background-size : cover ; background-repeat : no-repeat ; -webkit-filter : blur (5px ); -moz-filter : blur (5px ); filter : blur (5px ); filter : url("blur.svg#blur") ; /* путь к svg */ }
А вот и итоговый вариант с применением эффекта размытия:
Единственный недостаток: нечёткие границы размытия, которые выходят за пределы родительского элемента. Часто такой побочный эффект может быть нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden .
По своему действию blur CSS очень похож на фильтр «Размытие по Гауссу ». Теперь мы можем достичь такого же эффекта на веб-страницах.
При неправильном использовании размытие может создать у пользователей чувство, будто они посетили ваш сайт после недельного загула, потому что это вызовет у них головную боль. Чтобы это исправить, эффект размытия часто сочетают с переходом, который я также продемонстрирую в этой статье.
Обратите внимание на IE 9 +
Когда в Microsoft решили довести Internet Explorer до современных веб-стандартов, это привело к потере многих собственных CSS значений , включая фильтры DX , которые поддерживались в этом браузере, начиная с IE 5.5 . К сожалению, их нельзя было заменить альтернативными из CSS3 , что поставило IE9 , 10 и 11 в безвыходное положение. На момент написания этой статьи разработчики, которым нужны изображения с точно таким же эффектов размытием, используют в качестве кроссбраузерного решения скрипт StackBlur , работающий на основе canvas .
Код HTML:
Затем эффект размытия, примененный через класс:
img.blur { width:367; height:459px; -webkit-filter: blur(3px); filter: blur(3px); }
SVG фильтр размытия
На данный момент CSS blur background работает в Google Chrome , Safari (мобильной и настольной версиях ) и Firefox 35+ . Для получения поддержки более ранних версий Firefox , нужно применить фильтр SVG :
Сохраните файл под названием blur.svg , а CSS замените на:
img.blur { width:367; height:459px; filter: url(blur.svg#blur); -webkit-filter: blur(3px); filter: blur(3px); }
Поддержка старых версий IE
Для получения такого же эффекта в IE 4 — 9 , нужно использовать старый фильтр DX от Microsoft . Наш класс будет выглядеть следующим образом:
img.blur { width:367; height:459px; filter: url(blur.svg#blur); -webkit-filter: blur(3px); filter: blur(3px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="3"); }
Выключение эффекта
Если хотите сфокусировать изображение, нужно при следующем вызове CSS filter blur установить для него значение none. В данном случае я изменяю поведение фильтра при наведении курсора мыши через :hover :
img.blur:focus, img.blur:hover { -webkit-filter: blur(0px); filter: blur(0px); filter: none; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="0"); }
При наведении курсора в браузере (кроме IE ) вы увидите, что размытое изображение постепенно становится резче благодаря CSS-переходу .
Обрезка краев изображения
В отличие от других фильтров, которые мы пока что успели рассмотреть, CSS blur effect действует и за пределами границ элемента, размывая края изображения с его окружением. Если нужно, чтобы изображение было размыто только внутри, для этого есть несколько возможных методов:
- Если у вас изображение, у которого все края одного цвета, можно установить цвет фона (background-color ) в или элемент-контейнер такого же цвета;
- Используйте свойство clip , чтобы обрезать края изображения. Clip всегда указывается в следующем порядке.
clip: rect(top, offset of right clip from left side, offset of bottom from top, left)
Для изображения, размером 367 пикселей в ширину, 459 пикселей в высоту и эффект blur CSS 2 пикселя, Clip будет «сформулирован » так:
clip: rect(2px,365px,457px,2px);
Обратите внимание, что Clip применяется только к элементам, имеющим position: absolute . Если нужно получить поддержку в IE8 и более ранних версиях, не забудьте убрать px на конце значений.
Оберните изображение в элемент-контейнер (например
Размытый текст
Этот фильтр можете пока использовать и для размытия текста.
Перевод статьи “Cross-browser Image Blur with CSS ” был подготовлен дружной командой проекта
Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop - то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background - тоже фон, но является частью элемента, к нему и относится свойство background.
Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций . В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).
CSS фильтры такие как blur(), contrast() или grayscale() - отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.
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 {
background-color: rgba(255,255,255,.6);
backdrop-filter: blur(5px)
}
Каждый элемент за header`ом размыт на 5px. Это так просто.
filter()
Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:Element {
background: filter(url(path/to/img.jpg), blur(5px));
}
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она - вариация 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`ов до конца года.