Найти тему
HTML GIRL

Как сделать UI элементы в стиле неоморфизм?

Большой положительный отклик вызвал этот шот на Dribbble. Он собрал более 3000 лайков, опубликовал его пользователь alexplyuto.

Элементы в стиле неоморфизм выглядят выступающими над фоном.Добиться такого эффекта можно, поиграв с двумя тенями и задав для одной положительные значения, а для другой – отрицательные. Но, чтобы такой прием сработал, фон нельзя делать абсолютно черным или абсолютно белым. У него должен быть хотя бы минимальный оттенок, чтобы на нем были различимы темные и “светлые” тени. Фон можно окрашивать в любой оттенок, чтобы он получался “холоднее” или “теплее” в зависимости от ваших предпочтений. Однако, на нем должны быть видимы как темные, так и светлые тени – хотя бы чуть-чуть.

А теперь перейдем к практике:

Шаг 1

У меня прямоугольник со скруглением 20 градусов.
У меня прямоугольник со скруглением 20 градусов.

Шаг 2

Добавьте тень. Я брала цвет фона и делала темнее пока не осталась довольна результатом.
Добавьте тень. Я брала цвет фона и делала темнее пока не осталась довольна результатом.

Шаг 3

Еще  1 тень. Тоже брала цвет фона и сделала светлее.
Еще 1 тень. Тоже брала цвет фона и сделала светлее.

Шаг 4

Поменяла цвет шейпа в цвет фона
Поменяла цвет шейпа в цвет фона

Шаг 5

Еще одна тень того же цвета, что и светлая с прозрачностью 50%.
Еще одна тень того же цвета, что и светлая с прозрачностью 50%.

Шаг 6

Добавляем обводку в 1 px
Добавляем обводку в 1 px

Готово!

Тут  я добавила еще несколько разных шейпов и просто скопировала к ним настойки первого.
Тут я добавила еще несколько разных шейпов и просто скопировала к ним настойки первого.

Делала все в фигме. Очень быстро и просто. Спасибо, что прочитали до конца! если было полезно поделитесь в соц сетях и ставьте лайк))

За вдохновение спасибо @alexunderhess.design

Если вам нужен дизайн или есть вопросы:

Вконтакте

Инстаграм

Почта

Сайт с портфолио