От автора: сегодня мы поговорим о CSS свойстве backdrop-filter, которое было представлено в спецификации Filter Effects Module Level 2. В частности, мы разберем синтаксис свойства, поддержку в браузерах и практическое применение.
Свойство backdrop-filter — это не просто фильтры
Скорее всего, вы уже слышали про CSS фильтры. Если все же вам нужно напомнить, можете прочитать отличную статью «CSS фильтры: размытие, оттенки серого, яркость и т.д. в CSS!».
Свойство filter позволяет применять на элементы такие эффекты, как размытие и сепию, а с помощью свойства backdrop-filter мы сможем применять те же самые эффекты, но уже к фону за элементом. В демо ниже показана разница (вы должны сидеть через браузер с поддержкой, например, через Chrome с активированным флагом Experimental Web Platform Features – более подробно о поддержке в браузерах см. в следующей секции):
В первом случае фильтр применяется ко всему изображению, а во втором – только к той части, что расположена позади текста. Нужно также прояснить, что эффект не применяется к фону самого изображения, он применяется к тому, что находится под ним. Кроме того, фон самого изображения должен быть слегка прозрачным, чтобы пользователь увидел желаемый визуальный эффект.
Синтаксис и поддержка в браузерах
Часть функций, с которыми вы вероятно уже знакомы, свойство backdrop-filter переняло у свойства filter. Данные значения можно применить к любому элементу с помощью следующего синтаксиса:
|
1 |
backdrop-filter: <filter-function> [<filter-function>]* | none |
Как и со свойством filter, тут можно применять несколько фильтров к фону элемента. Все значения, подходящие для filter, также подходят и для свойства backdrop-filter. Свойство поддается анимации.
Несмотря на все сходства, у свойства backdrop-filter не такая широкая поддержка, как у filter. Прямо сейчас без флага данное свойство поддерживает только Safari 9, и даже в этом браузере придется использовать префикс –webkit-.
В браузерах Chrome и Opera можно активировать флаг «Experimental Web Platform Features» по адресу «chrome://flags». В Firefox и Edge данное свойство не поддерживается вовсе. Более подробно изучить поддержку в браузерах для свойства backdrop-filter можно на сайте Can I use.
Как использовать свойство backdrop-filter
Для правильной работы свойство backdrop-filter требует минимум два элемента: целевой элемент и второй элемент, расположенный под целевым, к которому будет применяться эффект. В демо выше фоновый эффект создается при помощи следующей разметки:
|
1 2 3 4 5 6 |
<div class="backdrop"> <div class="content"> <h3>A Heading</h3> <p>Some random text related to the heading.</p> </div> </div> |
Также мы использовали стили ниже, чтобы применить фильтр к фону нашего элемента, а также чтобы установить фон текста:
|
1 2 3 4 5 6 7 8 9 10 |
.backdrop { background: url('path/to/image.jpg'); } .content { position: relative; top: 30%; background: rgba(100,150,100,0.35); backdrop-filter: hue-rotate(180deg); } |
Еще один интересный способ применения данного свойства заключается в том, чтобы применять разные фильтры к разным частям изображения. Я говорю не об одновременном применении нескольких фильтров, что тоже возможно. Я имею в виду, что можно применить фильтр grayscale к левой части изображения, а sepia – к правой. Или же можно разбить изображение на несколько частей и применить фильтр hue-rotate ко всем частям с разным значением. Один из способов сделать так заключается в том, что целевым элементам необходимо выставить прозрачность в ноль, чтобы они не влияли на изображение под ними, к которому применяются фильтры.
Разметка:
|
1 2 3 4 5 6 7 |
<div class="backdrop"> <div class="target a"> </div> <div class="target b"> </div> .... </div> |
И CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.target { position: absolute; top: 0%; height: 100%; width: 20%; opacity: 0; } .a { left: 0%; backdrop-filter: hue-rotate(30deg); } .b { left: 20%; backdrop-filter: hue-rotate(90deg); } /* Фильтры других секций изображения */ |
В моем случае результат такой:
Красота конечного изображения зависит от самого изображения и выбранных вами фильтров. Однако если правильно использовать данное свойство, можно создать по-настоящему потрясающие эффекты. Чтобы понять, чего можно добиться, вы должны сами поэкспериментировать с различными фильтрами.
Кроме того, можно анимировать различные свойства наших целевых элементов. К примеру, в демо ниже в верхней части изображения расположены два div’а, к каждому из которых применены разные фильтры.
При наведении курсора мыши на изображение ширина первого div’а и высота второго div’а меняются от 0% до 80% за 0.5 секунды. Изображение делится на 4 секции, к каждой из которых применена своя комбинация фильтров:
Среди других способов применения – SVG фильтры, а также анимация фильтров, примененных к целевым элементам.
Практическое применение
Создавать все эти красивые эффекты при помощи свойства backdrop-filter, конечно, хорошо, но у данного свойства много способов практического применения. Первое, что пришло мне в голову, когда я узнал об этом свойстве – как его использовать для размытия изображения и предупреждать пользователей перед показом какого-либо графического контента.
Для начала нам понадобится следующая разметка:
|
1 2 3 4 5 6 7 |
<div class="graphic-content"> <img src="path/to/graphic/image.jpg"> <div class="warning"> <p>Click on the button below to see the image from the murder scene.</p> <button>Show Me</button> </div> </div> |
Помещаем в контейнер div как само изображение, которое будем размывать, так и текст с предупреждением. Текст предупреждения оборачивается в еще один div с высотой и шириной изображения.
CSS код для создания эффекта размытия изображения:
|
1 2 3 4 |
.warning { background: rgba(0,0,0,0.75); backdrop-filter:contrast(4) blur(20px); } |
Можете поиграться с разными фоновыми цветами и фильтрами и подобрать то, что вам подходит. В демо ниже я также добавил немного JS, чтобы прятать текст с предупреждением по клику на кнопку «Show Me». Попробуйте:
С помощью свойства backdrop-filter также можно размывать фон при показе модальных окон пользователям, а также для размытия фона за выдвигающимся меню при его открытии. Еще один способ применения свойства backdrop-filter – размывать изображения на сайте до их полной загрузки, как это делается на сайте Medium.
Заключение
С помощью свойства backdrop-filter вы сможете воссоздавать множество эффектов, для которых раньше нужен был JS. Однако я бы посоветовал подождать нормальной поддержки в браузерах перед использованием свойства в продуктиве. Помимо всего прочего, нужно помнить еще о производительности. Если использовать свойство на большом количестве элементов или на больших областях страницы, производительность сильно падает.
Более подробно изучить свойство backdrop-filter можно в черновике W3C и в документации на MDN. А вы знаете какие-либо интересные способы применения данного свойства? Думаете ли использовать его в будущем? Пишите об этом в комментариях.
Автор: Asha Laxmi
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
