Эффект «матового стекла» посредством CSS-фильтров

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

Компания Adobe знала, что фильтры будут востребованы, потому что уже проложила им путь посредством Photoshop.

В web-инструментарий CSS-фильтры попали c уже осмысленным синтаксисом, к тому же «адобовцы» помогли разработчикам со спецификацией и внедрением в браузеры.

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

Ниже следует краткое руководство, в котором рассказывается об использовании CSS-фильтров.

Пока такие фильтры, как «контраст», «насыщенность» и «размытие» существовали только лишь в графических редакторах, в web-технологиях мы видели их в уже готовых изображениях, к которым эти фильтры применялись заранее.

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

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

Старая школа: Эффект матового стекла из нескольких картинок

Использовать эффект матового стекла в web-дизайне начали довольно давно. Эффект реализовывался относительно просто: имелось два изображения – оригинальное и обработанное (матовое, «заблёренное» (blur) белым оттенком и размытое, с повышенной яркостью).

Затем оригинал применялся фоном к тегу body, а обработанное изображение – задавалось фоном для контейнера div. После чего, для div’а задавались размеры, граница и позиционирование, так что в итоге мы получали нужный эффект.

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

Демо

HTML

Разметка относительно проста. У нас всего один тег article, внутри которого находится все содержимое:

<article class="glass down">
<h1>Птица-Секретарь</h1>
<p>наводит справки ...</p>
</article>

CSS

Для начала подгоняем все к размерам отображаемой области. Затем совмещаем матовую версию фона с вершиной оригинального фона.

В конце добавляем белый оттенок. Переполнение спрятано, дабы предотвратить появление скроллинга и чтобы закрепить эффект за элементом .glass:

html, body, .glass {width: 100%;height: 100%;overflow: hidden;}
body{background-image:url('pelican.jpg');background-size: cover;}
.glass::before {display:block;width: 100%;height: 100%;background-image:url('pelican-blurry.jpg');background-size:cover;content:' ';opacity: 0.4;}
.glass{background-color: white;}

Этот CSS-код создает наше матовое и осветленное наложение. Нам также понадобится кнопка, которая будет сдвигать наложение к низу страницы, высвобождая пространство для отображения самого текста.

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

Так как демонстрационный режим использует переходы, я предпочел CSS-преобразования свойству background-attachment, так как CSS-преобразования могут работать с помощью аппаратного ускорения:

.glass.down{transform:translateY(100%) translateY(-7rem);}
.glass.down::before {transform:translateY(-100%) translateY(7rem);}
.glass.up, .glass.up::before {transform:translateY(0);}

На заметку

Если вам понадобятся дополнительные пояснения, я сделал версию-конструктор.

Эта техника проста и поддерживается большинством браузеров.

Также я немного приукрасил демонстрационный пример с помощью переходов, сгенерированного контента, прозрачности, преобразований и свойства background-size ; все они поддерживаются большинством браузеров вплоть до IE9, за исключением OperaMini.

Новая школа: Матовое стекло с помощью фильтров

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

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

Для этих случаев будет правильным использовать только исходные изображения. И далее матировать их. Вот здесь и приходят на помощь CSS-фильтры.

Они позволяют применять эффект размытия с помощью самого браузера, используя непосредственно CSS-фильтр.

CSS

Мы настраиваем CSS для наложения матовости на оригинальное изображение с применением фильтра blur.

Код до:

.glass::before {
     background-image: url('pelican-blurry.jpg');
 }
Код после:
.glass::before {
     background-image: url('pelican.jpg');
     filter: blur(5px);
 }

Демо

Ложка дегтя

Проще пареной репы, верно? Увы, но на данный момент технология CSS-фильтров довольно сыра. Это значит, что поддержка может быть встроена разработчиками в браузер, но не означает, что данная технология поддерживается всеми браузерами.

Однако есть фильтры в SVG, которые появились довольно давно и применение SVG-фильтров в HTML посредством CSS поддерживается гораздо большим числом браузеров.

Вы можете добавить этот вариант как запасной, на тот случай, когда CSS-фильтры не будут работать. Демонстрационный пример ниже показывает, как это сделать.

Для того чтобы добавить SVG-фильтр, мы включаем тег <svg> в наш html-код и ссылаемся на фильтр с помощью тега url().

SVG

<svgxmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlurstdDeviation="5" />
</filter>
</defs>
</svg>

CSS

.glass::before {background-image:url('pelican.jpg');
/* резервный вариант с использованием SVG-фильтров */
filter:url('#blur');
filter: blur(5px);}

Также не стоит исключать тот вариант, когда ни CSS, ни SVG-фильтры не поддерживаются.

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

Заключение

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

В сравнении со статическими изображениями фильтры проще использовать и легче изменять. Фильтры прекрасно работают в текущих версиях Google Chrome, Safari, и Opera, а также в Firefox. Об IE пока что умолчим.

CSS-фильтры стоит использовать уже сейчас, предварительно продумав резервные варианты на случаи, когда «сил» браузера не хватит на поддержку фильтров.

Данная публикация представляет собой перевод статьи «Frosting Glass with CSS Filters» , подготовленной дружной командой проекта Интернет-технологии.ру