Привет! В четвертом выпуске CSS Magic расскажу, как сделать красивый блюр эффект для карточки. Поехали!
И так, сегодня мы будем делать блюр-эффект. Вот такого типа: Сделать такое можно вполне несложно с помощью filter: blur(). Но, конечно, не все так просто :) Начнем с разметки: HTML <div class="block block--blur">
<div class="block__man" id="superman">
<figure>
<img class="lazy lazy-hidden" src="//blog.maxgraph.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder...
Вчера я наткнулся на действительно классный эффект на веб-сайте и попытался воспроизвести этот эффект для нового веб-приложения, которое я разрабатываю. У него был прозрачный контейнер, создающий фон фильтра на фоновом изображении позади него, и это было действительно круто. Вот эффект: Я попробовал обычный фильтр свойств css: blur (10px), но он размыл только сам контейнер, а не фон за элементом. После некоторого исследования я нашел супер простое однострочное свойство css для этого...