Простые, но приятные и воздушные тени вместе с Vue Box Shadows03.10.2022 10:31

В современном дизайне, почти на каждом сайте и в приложениях можно увидеть тени, которые дизайнеры и разработчики применяют для создания эффекта глубины и объема.

Halo Lab. Dribbble.comAndrej Sharapov. Dribbble.comShibbir. Dribbble.comMasud Rana. Dribbble.comAndrej Sharapov. Dribbble.com

Согласитесь, такие проекты выглядят действительно красиво и презентабельно, особенно если используются мягкие тени, а не жесткие мрачные «обводки».

О тенях

Для создания таких эффектов разработчики используют css свойства box-shadow и drop-shadow. Это весьма заурядные свойства, которые применяется в дизайне уже несколько лет и поддерживается всеми современными браузерами и устройствами. Убедиться в этом вы можете зайдя на сайт Can I Use.

Освоить работу с этим свойством достаточно просто, многим хватит и одного дня, если не пары часов. Даже здесь можно легко найти несколько статей, описывающих его работу. Однако, научиться применять это свойство правильно — получается не всегда, даже у опытных дизайнеров.

Опыт

Мне нравится работать с тенями, потому что с их помощью можно создать много потрясающих эффектов, от простых кнопок и различных блоков, вплоть до оформления карточек товаров в интернет-магазинах, элементов лендинга, мобильных приложений, личного блога и прочего. И самое главное, что тени уже много лет остаются в тренде веб-дизайна.

Проблематика

Наверняка вы сталкивались с такой проблемой, что когда вы используете какой-либо ui-фреймворк (например Bootstrap, Bumla, Vuetify, MUI и другие) то он по умолчанию предлагает вам использовать встроенные в компоненты свойства тени, которые, будем откровенны, не всегда удачны или ограничены количеством. Да и если вы пишете код без фреймворка, то вам все равно приходится каждый раз вспоминать работу css свойств и писать свои стили. Это иногда утомляет.

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

Библиотека css-теней

Библиотека теней первым делом нацелена на ускорение рабочего процесса начинающим веб-дизайнерам и разработчикам, которые еще не успели углубиться в верстку, но хотят создавать красивые тени в своих проектах. Она включает в себя более 100 воздушных и приятных взору теней, добавляющих объем и легкость элементам будущего приложения. Конечно, опытным разработчикам она вряд ли пригодится, но может и они почерпнут для себя что-нибудь полезное.

Сейчас я углубился в изучение Vue.js и в работе мне иногда приходится применять ui-фреймворки, такие как Vuetify, Tailwind и другие с некоторыми неудобствами в предлагаемых ими компонентах, таких как карточки, выпадающее меню, всплывающие подсказки, списки и прочее. Для сравнения, группа elevations:

Первое время я писал свои классы и стили для определения новых теней, к которым иногда приходилось применять ! important, но потом решил сделать свою небольшую библиотеку, которая так и называется vue-box-shadows.

О Vue Box Shadows

На данный момент выпущена версия 2.0.0 насчитывающая 115 теней, которые подойдут для самых различных целей, например, оформления ценовых карточек. Сейчас в ней есть обычные возвышения, горизонтальные, вертикальные и угловые тени, несколько простых паттернов и даже для фанатов неоморфизма имеется несколько базовых элементов.

Установка

Вы можете устанавливать пакет с библиотекой глобально или использовать локально так же как и другие пакеты согласно инструкции.

Применение

Применение теней происходит при помощи добавления директивы v-box-shadow к выбранному вами элементу.

Если вы всё правильно установите, то у вашего элемента отобразится базовая тень, которую вы сможете легко переписать с помощью настраиваемой опции.

Все тени пронумерованы по id и поделены на группы для удобства пользования библиотекой. Поэтому для применения понравившейся тени вам достаточно добавить к директиве идентификатор (id):

Помимо id теням присвоены особые короткие наименования, которые интуитивно понятны и соответствуют названиям своих групп:

Neumorphism — neu-$
Axis x — ax-$
Axis y — ay-$
и другие.

Так например, если вам будет удобнее использовать наименования, то код из примера выше можно написать следующим образом:

Актуальный список групп:

None
Elevation
Borders
Neumorphism
Axis x
Axis y
Small inner side
Medium inner side
Large inner side
Top
Bottom
Right side
Left side
Angle: top left
Angle: top right
Angle: bottom right
Angle: bottom left
Patterns

Подробную информацию по группам вы можете найти в репозитории.

На этом установка и настройка окончена.

Если вы не используете vue.js, вы легко можете проанализировать тени из библиотеки через встроенную во все браузеры консоль разработчика или посмотреть файл теней просто заглянув в репозиторий на github.

Надеюсь данный материал будет полезен и вы найдете применение для этой библиотеки в своих проектах. Приятного пользования!