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