Представляю Вашему внимаю очень симпатичный эффект размытия -Blur – на CSS
Сделать такой эффект на сайте совсем не сложно.
Для начала нужно добавить CSS стили. Обратите вниамние, что в примере предствален чистый код CSS стилей, и возможно на него могут влиять стили вашего сайта.
Структура эффекта состоит их 2 “слове”:
- фон-подложка.
- над ним размытие с текстом.
HTML
|
1 2 3 4 5 6 |
<!--HTML блок эффекта размытие--> <div class="outer" > <div class="inner blur text"> Эффект размытия </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/*Внешний блок с фоном*/ .outer { background: no-repeat url(https://nashkiev.ua/assets_images/post/000/118/386/image_originals.png); /*ссылка на картинку фона*/ background-size: cover; /* Фон занимает всю доступную площадь */ text-align: center; /*текст посередине*/ } /*Внутренний блок*/ .inner { display: inline-block; margin-top: 130px; /*отступ блока вверху*/ margin-bottom: 130px; /*отступ блока снизу*/ } /*Blur эффект - эффект размытия*/ .blur { border: 0 solid rgba(35,35,35,.667); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); background: hsla(0,0%,87.1%,.2); /*отступ блока вверху*/ padding: 50px; } /*Настройка текста*/ .text { color: #ffffff; font-weight: 700; font-family: Roboto; font-size: 3em; } |