Всем привет!
В современном дизайне, при создании сайтов и приложений, многие разработчики применяют эффект глубины и объема, нередко обращаясь к таким 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