Filter Blur focus HTML CSS
CSS Magic #2. Блюр-эффект (css blur effect)
Привет! В четвертом выпуске 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...
Эффект матового стекла(Glassmorphism) Генератор — https://css.glass/ CSS: .box { background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255, 255, 255, 0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 32px; height: 200px; width: 450px; }