Как стать автором
Обновить

Box-shadows.css

Веб-дизайн *Разработка веб-сайтов *CSS *HTML *GitHub
image

Всем привет!

В современном дизайне, при создании сайтов и приложений, многие разработчики применяют эффект глубины и объема, нередко обращаясь к таким css свойствам как box-shadow и drop-shadow. Некоторые считают, что в 2018 году это тренд. И действительно, немало как иностранных, так и российских сайтов, которые в 2018 году стали чаще применять тени.

В связи с этим, недавно появилась небольшая коллекция простых и приятных css теней, часто встречающихся на сайтах (плюс — минус пара пикселей в сторону). Коллекция так и называется — Box-shadows.css. Она уже получила несколько положительных отзывов в сети и недавно была обновлена до версии 1.0.4, в которой появилось еще несколько красивых теней, разделенных на группы.

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

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

Подключение стилей


Чтобы подключить таблицу стилей, перейдите на сайт проекта и скачайте нужный вам файл. Затем, подключите файл к вашей html странице, после открывающего тега <head> удобным для вас методом.

<head>
  <link rel="stylesheet" href="/box-shadows.css">
  <!-- or -->
  <link rel="stylesheet" href="/box-shadows.min.css">
</head>

Вы можете использовать генератор файла min.css, который позволит вам создать собственный файл, состоящий только из выбранных классов. Ну, или просто выбрать нужный вам блок и скопировать понравившуюся тень к своему сайту. Это поможет снизить нагрузку, если ваш проект использует менее двух или трех теней. Просто следуйте инструкциям на сайте и у вас все получится.

Использование классов


Чтобы подключить нужную тень к вашему блоку, просто добавьте в него класс .bShadow с нужным номером:

<div class="bShadow-54"></div>

Эффекты при наведении


Чтобы создать вашему блоку эффект при наведении, добавьте понравившийся класс с номером, например, .bShadow-1 и напишите после цифры латинскую букву h. Например:

<div class="bShadow-38 bShadow-1h"></div>

Посмотрите на примере класса .bShadow. При наведении он присваивает теневые значения соседнего класса .bShadow-1. Если вы хотите, чтобы при наведении или клике тень не появлялась, добавьте класс .bSnone

Плавная трансформация и анимация


Класс .bShadow по умолчанию использует плавную анимацию в .2s transition: transform 0.2s ease-in-out, а также включает свойство, которое предупреждает браузер о предстоящей трансформации тени и позиции will-change: transform, box-shadow;.

Используйте это, чтобы сделать красивую анимацию ваших блоков. Например, вы можете добавить свой класс или свойства с трансформацией:

.transform-translateY-5:hover {
  -webkit-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
}

Затем, добавьте в нужный вам контейнер:

<div class="bShadow transform-translateY-5 bShadow-1h">ваш текст</div> и вы увидите результат

Добавление параметра inset


Чтобы добавить параметр внутренней тени, просто вставьте скрипт на страницу html и укажите в нем классы, для которых вы хотите применить его.

Например .bShadow-1. Чтобы указать несколько классов, разделяйте их запятыми, как в примере ниже. Не забывайте ставить точку перед классом!

[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) {
  var bsh = getComputedStyle(node).boxShadow;
  node.style.boxShadow = "inset " + bsh;
});

Демо

Генератор css box-shadow


Коллекция также подразумевает увеличение количества классов с тенями, созданных самим пользователем. То есть, вы можете использовать классический генератор теней, чтобы дополнять коллекцию своими собственными стилями. Нажав кнопку «Сохранить и добавить следующий», вы можете создавать бесконечное количество классов. Первому сгенерированному и последующим классам присваивается порядковый номер, который не находится в коллекции. Полученные стили можно с легкостью скопировать и вставить в корневой файл css вашего проекта или в файл box-shadows.min.css, созданный на сайте коллекции.

Сейчас планируется расширение коллекции и настройка npm пакета, но с этим есть небольшие затруднения. Поэтому, пока надеюсь на получение ссылки cdnjs и дальнейшее развитие проекта.

GitHub · WebPage
Теги: cssbox-shadowhtmlstylesheetinsetcss3librarybox-shadows-css
Хабы: Веб-дизайн Разработка веб-сайтов CSS HTML GitHub
Всего голосов 23: ↑13 и ↓10 +3
Комментарии 11
Комментарии Комментарии 11

Похожие публикации

Лучшие публикации за сутки