Наложения фильтра 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)

Результат-

фильтры CSS

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

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


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

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


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

Введите Ваш email


9 комментариев:

  1. Спасибо, Виктория! Для меня это трудно понять. И не знаю, где можно использовать.

    ОтветитьУдалить
  2. Ирина, код - то готовый уже. К любой картинке, баннеру можно применить.

    ОтветитьУдалить
  3. Красивый прием, я использую при редактировании фото. Там есть еще разновидности. Мне нравится - выделят фокус фото)))

    ОтветитьУдалить
    Ответы
    1. Light Knight, а где это можно сделать, или я что - то пропустила.

      Удалить
    2. Я обрабатываю фото в программе PhotoScape- она бесплатная. Если не зеркалка - ее достаточно. Есть все нужные эффекты. Вне фокуса, Blur, вытягивает фотку. Особенно важно при мыльницах и мобильнвх фотках

      Удалить
  4. Господи, как много интересного в одной программе. Тут можно цельный мультик сваять.

    ОтветитьУдалить
  5. Семён, берите круче - сериал полноценный. Про мультик стоит подумать.

    ОтветитьУдалить
  6. Кстати, вспомнил - радуюсь безмерно. Googlephoto сделали сортировку по алфавиту. Даже приличные хостинги такого не делали. Теперь есть все для поодержки фото для блогов. Бесконечное хранилище и Сортировка 3 видов для альбомов

    ОтветитьУдалить
  7. Light Knight, понятно с программой для обработки. Ну как вариант такой код, что в статье. Надо будет зайти Googlephoto посмотреть. Давненько не заглядывала. Спасибо.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML