938 читали · 2 года назад
Эффект матового стекла в Photoshop
Шаг 1 Создаём новый документ размером 1080×1080рх Шаг 2 Создаём в центре документа эллипс любого цвета. Шаг 3 Через двойной клик по слою вызываем панель стилей слоя и задаём градиент. Шаг 4 Поверх эллипса создаём прямоугольник со скругленными углами более крупного размера. У нас получился радиус скругления 60рх. Ваш радиус скругления будет зависеть от изначального размера документа. Шаг 5 Убираем заливку у прямоугольника до 0. Шаг 6 Задаём прямоугольнику градиент через стили слоя. От белого 40% к белому 0%, непрозрачность 50%, угол падения — 54, вид — линейный...
3 месяца назад
Как правильно реализовать эффект матового стекла на сайтах Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости В статье есть фрагменты готового кода и интерактивные примеры В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter #awd_article #awd_web