Как размыть фон под блоком, используя SVG
При помощи SVG фильтра feGaussianBlur можно размыть какую-нибудь область на фотографии, ограничив ее блоком любой формы и с любым оформлением. На размытой области текст становится более читаемым. Этот прием хорошо работает, когда не желательно размывать весь фон целиком, а непосредственно под блок с текстом. Размывать будем CSS фильтром blur и SVG фильтром feGaussianBlur, для обеспечения кроссбраузерности.
Пример текста на не размытом фоне:
Пример текста на размытой области:
HTML разметка
Создадим текстовый блок, который впоследствии предстоит размыть и вставим SVG фильтр, указав степень размытости stdDeviation.
<div class="blur-block">
<h1>Лимон</h1>
<span>Полезен в любой сезон года. Это гибрид цитруса и горького апельсина.</span>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="6"></feGaussianBlur>
</filter>
</svg>
CSS код
Вставим картинку в качестве фона, запретив ей повторяться и прокручиваться. Выровняем ее по центру и укажем размер cover. Обратите внимание, что фоновая картинка по наследству переходит в body и в область размытия через значение inherit. Это важно!
html {
background: url("https://cdn.pixabay.com/photo/2020/07/24/21/58/lemon-5435158_960_720.jpg")
no-repeat fixed center / cover;
position: relative; /* относительное позиционирование */
overflow-y: scroll; /* разрешить вертикальную прокрутку */
}
body{
background: inherit; /* наследование фоновой картинки */
display: flex;
min-height: 100vh; /* минимальная высота */
}
Оформление размытой области
.blur-block{
position: relative;
display: flex; /* флексовый блок */
flex-direction: column; /* текст по вертикали */
justify-content: center;/* текст по центру */
align-items: center;/* текст по центру */
margin: auto; /* выравнивание блока по центру */
width: 450px; /* ширина блока */
height: 200px; /* высота блока */
padding: 5px; /* поля для текста */
box-shadow: 1px 1px 4px rgba(14, 14, 14, 0.3); /* тень */
border: 15px solid rgba(255, 255, 255, 0.15); /* рамка у блока */
border-radius: 5px; /* скругление углов рамки */
text-shadow: 0 1px 2px #000; /* тень для текста */
color: #fff; /* цвет текста */
background: inherit; /* наследование фоновой картинки */
cursor: move; /* вид курсора */
font-family: Montserrat, sans-serif; /* название шрифта */
}
Оформление текста
h1 {
font-size: 40px; /* размер заголовка */
color: #FFFF8D; /* цвет заголовка */
margin-bottom: 5px; /* нижний отступ */
}
span {
font-size: 20px; /* размер описания */
margin-top: 5px; /* верхний отступ */
margin-bottom: 30px;/* нижний отступ */
}
Размываем область
.blur-block:before{
content:""; /* пустой */
position: absolute; /* абсолютное позиционирование */
top: 0;
left: 0;
bottom: 0;
right: 0;
background: inherit; /* наследование фоновой картинки */
filter: blur(10px); /* фильтр размытия */
filter: url(#blur); /* кроссбраузерное размытие */
}
Посмотрите пример на CodePen
-
Создано 09.06.2021 10:16:17
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.