Наложения фильтра blur для размытия фона

Привет, друзья. Вы, наверняка, много раз видели на некоторых сайтах эффект размытия фона на странице. В большинстве своём они создаются с подключением библиотеки  jQuery. Но не всегда её целесообразно применять. Сделаем мы такой эффект используя CSS. 

А именно  - используем фильтра blur для размытия фона под текстом. Он размывает содержание элемента, как будто тот находится не в фокусе. Ни какой фотошоп нам не понадобится. Вообще свойство filter  позволяет применять к элементу такие графические эффекты, как размытие и смещение цвета.

Давайте пока рассмотрим самый простой пример наложения текста на размытом фоне. Скопируйте приведённый ниже код и просмотрите результат в этом редакторе. 

<div class="glass-backdrop">

    <span>Остров Бора - Бора</span>

</div>

<style>

.glass-backdrop {

    height: 400px;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 10px 0;

    background: url("https://cdn.pixabay.com/photo/2017/12/16/22/22/bora-bora-3023437__340.jpg") center no-repeat;    

}

.glass-backdrop span {

    position: relative;

    text-align: center;

    color: #FFF;

    width: 30%;

    font-size: 32px;

    line-height: 30px;

    padding: 40px 0;

    box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 16px 28px rgba(0,0,0,0.2);

    text-shadow: 0 0 12px rgba(0,0,0,0.6);   

    text-transform: uppercase;

    font-family: 'Roboto Condensed', Tahoma, sans-serif;

    letter-spacing: 4px;

    z-index: 1;

    overflow: hidden;

    backdrop-filter: blur(8px);

}</style>

В этом примере мы размываем изображение фона, используя 8 соседних точек. Значение filter: blur(8px). С ним и играемся. Если значение больше, на выходе дает большее размытие, меньше - меньшее. 

Попробуйте поменять на большее(или меньшее) значение ширины блока width: 100%;

Значения box-shadow: и text-shadow: размер font-size: цвет текста  color: #FFF; и адрес вашей картинки. 

Можете объединять ещё некоторые функции для управления отображением. Но здесь нужно обратить внимание, что порядок при этом имеет значение. Например, использовав grayscale() , и дополнительно обработав blur CSS. На выходе вы получите полностью серое изображение.

Просто заменить backdrop-filter: blur(8px); 

на filter: blur(1px) grayscale(2);

Имеем такой результат

Или filter: blur(1px) sepia(1)

Результат-

Вот здесь ещё некоторые примеры фильтров. Попробуйте если это интересно.

Но, обращу ваше внимание, что, как пишут разработчики MDN 

Это экспериментальная технология

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

 Получайте новые статьи прямо на почту

Введите Ваш email