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

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

О тенях

Для создания таких эффектов разработчики используют 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 к выбранному вами элементу.

<template>
  <div v-box-shadow>
    Add beautiful shadow effects to your project without thinking about CSS.
  </div>
</template>

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

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

<template>
  <div v-box-shadow="34">
    Add beautiful shadow effects to your project without thinking about CSS.
  </div>
</template>

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

• Neumorphism - neu-$

• Axis x - ax-$

• Axis y - ay-$

  и другие.

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

<template>
  <div v-box-shadow:neu-2>
    Add beautiful shadow effects to your project without thinking about CSS.
  </div>
</template>

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

• 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.

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