Эффект «матового стекла» посредством 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» был подготовлен дружной командой проекта Сайтостроение от А до Я.