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