Коллекция кнопок в стиле неоморфизма
Неоморфизм (Neumorphism) — это тренд в веб-дизайне, который начал набирать популярность в 2020 году. Основная идея неоморфизма заключается в том, чтобы элементы интерфейса выглядели как встроенные в фон и создавали иллюзию мягкой, физической поверхности.
Сегодня мы создадим коллекцию кнопок в стиле неоморфизма.
Вначале зададим светлый фон для всей страницы, который является базой при создании любых неоморфных элементов.
Добавим базовые стили для кнопки: внутренние отступы, размер шрифта и цвет текста. Это начальная структура кнопки перед добавлением теней и эффектов.
Зададим кнопке фон и рамку такого же цвета, как у всей страницы. Это необходимо для создания эффекта, что кнопка будто бы встроена в фон, что важно для неоморфизма.
Добавим скругленные углы с помощью свойства border-radius. Это придаст кнопке мягкий вид, который важен для неоморфного дизайна, так как создаёт более плавные формы.
Добавим первую тень для кнопки. Это создаст эффект легкого поднятия кнопки над поверхностью, что является основным визуальным приёмом неоморфизма.
Добавим плавный переход для всех изменений стилей. Это нужно для того, чтобы при наведении или нажатии кнопка плавно изменяла свои тени.
Добавим вторую тень для создания эффекта двойного источника света: тень идет как с верхней стороны (светлая), так и с нижней (темная). Это усиливает эффект глубины в неоморфизме.
Добавим стили для активного состояния кнопки при нажатии. Тени меняются на внутренние, что создает иллюзию вдавливания кнопки. Также меняется цвет текста, чтобы усилить эффект взаимодействия.
Добавим вторую светлую внутреннюю тень для активного состояния кнопки, чтобы усилить иллюзию глубины. Эффект нажатия в стиле неоморфизма для кнопки завершён.
Понажимайте на кнопку.
Добавим в разметку ещё одну кнопку. Для неё мы сделаем вариант отображения с рамкой. Для этого добавим дополнительный класс neu--bordered.
Увеличим толщину рамки для .neu--bordered до 4px. Пока что рамка не видна, так как её цвет совпадает с цветом фона кнопки.
Тень для кнопки с рамкой надо будет переопределить. Для начала возьмём исходную тень от общего класса .button-neu.
Добавим дополнительные внутренние тени к .neu--bordered. Благодаря этому стала видна рамка кнопки.
Переопределим тени в состоянии при нажании. В отличие от обычной кнопки, мы должны оставить внешние тени и убрать внутренние. Тогда при нажатии внутренняя часть кнопки будет «подниматься» до уровня рамки.
Понажимайте на обе кнопки, чтобы сравнить эффект.
Попробуем сделать круглые кнопки. Добавим их в разметку с дополнительным классом neu--rounded.
Для круглых кнопок подходят стандартные неоморфные тени, поэтому переопределять их не будем. Изменим только форму самих кнопок.
Напоследок проверим, а можно ли реализовать неоморфный дизайн для элементов со сложной формой. Добавим в разметку кнопку комментариев с дополнительными классами button--bubble и neu--freeform.
Мы будем делать кнопку в форме всплывающей подсказки, с треугольником в нижней части. Поэтому сначала зададим ей относительное позиционирование.
Треугольник «нарисуем» с помощью псевдоэлемента ::after. Зададим абсолютное позиционирование, координаты и размеры для будущего декоративного элемента.
Красный фон меняем на линейный градиент. С помощью градиента рисуем треугольник.
Поворачиваем псевдоэлемент на 45 градусов с помощью transform, чтобы треугольник смотрел вниз. Стилизация кнопки завершена.
Мы создали кнопку со сложной формой и эффект неоморфизма «сломался», так как тень, созданная с помощью box-shadow, не может повторять сложные формы.
Свойство box-shadow не подходит для создания неоморфного дизана для сложных форм. Поэтому убираем обычные тени.
И добавляем тени с помощью фильтра drop-shadow. Этот фильтр создаёт тени, которые повторяют любые сложные формы.
Чтобы добавить несколько теней, нужно использовать несколько фильтров drop-shadow.
У drop-shadow есть свои ограничения. Он не поддерживает внутренние тени. С его помощью сложно сделать много теней, так как каждый следующий фильтр включает тень от предыдущего. Но с нашей задачей он отлично справился.
Напоследок «шлифуем» градиент у выступающей части кнопки при нажатии стилизация завершена.
Экспериментируйте с неоморфными кнопками, делитесь результатами с нами и с друзьями.
