Сеня рядом и Белла пришел. Былое
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...
Эффект матового стекла в Figma
Все большую популярность набирает эффект матового стекла - Frosted glass Effect, который можно реализовать в Figma буквально за 5 шагов. Шаг 1 Создай прямоугольник произвольной формы c заливкой(Fill) FFFFFF (чистый белый цвет). Шаг 2 Измени прозрачность у прямоугольника и сделай ее 1%, также добавь размытие фона(Background blur) со значением 100. Шаг 3 Добавь последовательно шесть теней(Inner shadow) к прямоугольнику: Шаг 4 Теперь добавь обводку(Stroke) c прозрачностью 70%, толщиной 4px и радиальной(Radial) заливкой...