Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

От автора: сегодня мы поговорим о CSS свойстве backdrop-filter, которое было представлено в спецификации Filter Effects Module Level 2. В частности, мы разберем синтаксис свойства, поддержку в браузерах и практическое применение.

Свойство backdrop-filter — это не просто фильтры

Скорее всего, вы уже слышали про CSS фильтры. Если все же вам нужно напомнить, можете прочитать отличную статью «CSS фильтры: размытие, оттенки серого, яркость и т.д. в CSS!».

Свойство filter позволяет применять на элементы такие эффекты, как размытие и сепию, а с помощью свойства backdrop-filter мы сможем применять те же самые эффекты, но уже к фону за элементом. В демо ниже показана разница (вы должны сидеть через браузер с поддержкой, например, через Chrome с активированным флагом Experimental Web Platform Features – более подробно о поддержке в браузерах см. в следующей секции):

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


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

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

Синтаксис и поддержка в браузерах

Часть функций, с которыми вы вероятно уже знакомы, свойство backdrop-filter переняло у свойства filter. Данные значения можно применить к любому элементу с помощью следующего синтаксиса:

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 требует минимум два элемента: целевой элемент и второй элемент, расположенный под целевым, к которому будет применяться эффект. В демо выше фоновый эффект создается при помощи следующей разметки:

<div class="backdrop">
  <div class="content">
 <h3>A Heading</h3>
 <p>Some random text related to the heading.</p>
  </div>
</div>

Также мы использовали стили ниже, чтобы применить фильтр к фону нашего элемента, а также чтобы установить фон текста:

.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 ко всем частям с разным значением. Один из способов сделать так заключается в том, что целевым элементам необходимо выставить прозрачность в ноль, чтобы они не влияли на изображение под ними, к которому применяются фильтры.

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

Разметка:

<div class="backdrop">
  <div class="target a">
  </div>
  <div class="target b">
  </div>
  ....
</div>

И CSS:

.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);
}

/* Фильтры других секций изображения */

В моем случае результат такой:

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

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

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

Узнать подробнее

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

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

При наведении курсора мыши на изображение ширина первого div’а и высота второго div’а меняются от 0% до 80% за 0.5 секунды. Изображение делится на 4 секции, к каждой из которых применена своя комбинация фильтров:

Среди других способов применения – SVG фильтры, а также анимация фильтров, примененных к целевым элементам.

Практическое применение

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

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

Для начала нам понадобится следующая разметка:

<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 код для создания эффекта размытия изображения:

.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

Источник: https://www.sitepoint.com/

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


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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика 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