Вчера я наткнулся на действительно классный эффект на веб-сайте и попытался воспроизвести этот эффект для нового веб-приложения, которое я разрабатываю. У него был прозрачный контейнер, создающий фон фильтра на фоновом изображении позади него, и это было действительно круто.
Вот эффект:
Я попробовал обычный фильтр свойств css: blur (10px), но он размыл только сам контейнер, а не фон за элементом. После некоторого исследования я нашел супер простое однострочное свойство css для этого.
Вот оно:
.container {
backdrop-filter: blur(10px);
}
Я понятия не имел, что данное свойство CSS существует!
Теперь добавьте фоновое изображение позади контейнера и наблюдайте за волшебством. Довольно круто, правда?
P.S. Некоторые браузеры могут не поддерживать свойство. Но основные из них, такие как Chrome, Firefox и Edge, подходят.
Попробуйте и дайте мне знать, что вы думаете.
До скорых встреч в мире CSS!