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

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

От автора: Этот пост написан Беаром Тревисом (BearTravis), инженером веб-стандартов в Adobe. Мне очень нравится, как Adobe развивает Сеть при помощи новых дизайнерских возможностей, и делает это весьма ответственно. Отличный пример этому– фильтры CSS. В Adobe понимают их важность из-за того, что протоптал эту дорожку Photoshop. Их внедрили в Веб с нормальным синтаксисом и помогли реализовать как спецификацию, так и браузер. Теперь мы видим эти фильтры в стабильных браузерах, и они рекомендованы к использованию в адаптивном прогрессивном улучшении. Аллилуйя. Предлагаем вашему вниманию Беарас учебник на эту тему.

Так как в редакторах изображений уже некоторое время существовали фильтры вроде контрастности (contrast), насыщенности (saturate) иразмытия (blur), то для их переноса в Веб исторически требовалась доставка изображений с уже примененными фильтрами. По мере включения этих фильтров браузерами как части веб-платформы мы смогли начать разбирать сложные визуальные эффекты на составные части и реализовать их в Сети. В этой статье изучается один из таких эффектов — «матового стекла» — и то, как фильтры CSS обеспечивают более чистое и гибкое решение, нежели статические изображения.

Старая школа: эффект «матового стекла» с помощью изображений

Эффект «матовогостекла» некоторое время уже употребляется в Интернете; мы даже наблюдали его здесь, на CSS-Tricks, году этак в 2008. Главная идея этого эффекта довольно проста: нужно размыть и подсветить область за перекрываемым содержимым. Содержимое становится более контрастным по отношению к своему фону, но все равно примерно понятно, что за ним происходит. Встатьена CSS-Tricks используются два изображения: стандартная версия и матовая версия (размытая с помощью белого оттенка). В нашем примере карточка сдвигается вверх и открывает содержимое, матируя при этом фон.

HTML

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

<article class="glass down">
<h1>Pelican</h1>
<p>additional content...</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 создаст размытое и подсвеченное наложение. Так же нам понадобится сдвинуть его к низу страницы, оставив ровно столько места, чтобы был виден текст заголовка. Так как размытое изображение является дочерним элементом оверлея, то, кроме того, придется сместить его назад вверх к противоположной величине для того, чтобы оно оставалось выровненным по фону body. Так как в демо примере употребляются переходы, я решил воспользоваться преобразованиями 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 – имеется солидная браузерная поддержка вплоть до IE 9 (за исключением OperaMini).

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

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

Вот тут удобнее всего воспользоваться фильтрами CSS. Они дают возможность применять размытие уже в браузере с помощью свойства CSS filter.

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, мы включим в разметку HTML чуть-чуть встроенного SVG и обратимся к фильтру с помощью url(). Профессиональный намек: альтернатива этому варианту – закодировать фильтр SVG и обратиться как к dataurl, но такой формат немного сложнее читается в статье.

<svgxmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlurstdDeviation="5" />
</filter>
</defs>
</svg>
.glass::before{
background-image:url('pelican.jpg');
/* Альтернатива фильтрам SVG */
filter:url('#blur');
filter: blur(5px);
}

Может оказаться, что браузером не поддерживаются ни фильтры CSS, ни SVG. В таком случае пользователь увидит текст на подсвеченном (подкрашенном, но не размытом) фоне, что тоже смотрится не слишком убого.

Заключение

Фильтры позволяют применять в браузере такие эффекты, которые до того были возможны только в редакторе изображений. В качестве стиля элемента, а не отображаемого изображения, их проще изменять и заново использовать. Фильтры CSS применяются в текущих версиях Chrome, Safari и Opera, и активно разрабатываются в Firefox (об Internet Explore пока помолчим). Немного позаботившись об альтернативном поведении, можно начать применять их уже сейчас.

Источник: http://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree