20.06.2018 10:01
Madeas 11 2700 Источник
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

Комментарии (11)


  1. de1vin
    20.06.2018 13:39
    #18796757

    Было бы здорово, если бы были доступны миксины для препроцессоров.


    1. Madeas Автор
      20.06.2018 14:06
      #18796893

      Вот как раз над этим работаю, но советуют использовать autoprefix


    1. Madeas Автор
      20.06.2018 14:18
      #18796951

      Хотел сделать что-то вроде этого, но пока думаю как лучше реализовать, так как сам не до конца разобрался.
      @mixin bShad($box-shadow) {
      -webkit-box-shadow: $box-shadow;
      -moz-box-shadow: $box-shadow;
      box-shadow: $box-shadow;
      }
      .bShadow-1 {
      @include bShad( ... );
      }


      1. stepmex
        20.06.2018 15:53
        #18797303

        Судя по caniuse.com/#search=box-shadow префиксы -webkit- и -moz- 8 лет как не нужны. Я думаю стоит облегчить библиотеку и не использовать устаревшие префиксы.


      1. de1vin
        20.06.2018 19:54
        #18798419

        Я имел ввиду миксины не для префиксов.
        А, например, при верстке по БЭМ можно было в нужных блоках использовать примеси.


  1. ionicman
    20.06.2018 13:45
    #18796791
    +3

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

    А вот чтобы реально красивые тени сделать аля



    сделали бы инструмент — тогда другое дело.

    Статья из радела буханки и троллейбуса, уж извините.


    1. Madeas Автор
      20.06.2018 14:25
      #18796965

      Вы просто немного не поняли сути темы. Опытным разработчикам, может быть, такие тени и не нужны. Это ясно. Кстати, в примерах, что вы показали, тоже ничего необычного нет. Ну, разве что перспектива с более сложной структурой, которая нигде редко где применяется = бесполезно. Спасибо за интересную идею, может быть вскоре появится такой инструмент.


  1. fijj
    20.06.2018 14:37
    #18797007

    Очень не информативное наименование классов, как мне кажется, каждый раз придется обращаться к шпаргалке.


    1. Madeas Автор
      20.06.2018 14:43
      #18797025

      Согласен, но альтернативы пока нет, так как подобрать оптимальное название трудно. Тени меняются по нарастающей и выбрав один класс, можно будет подобрать получше, просто меняя цифру в + или -. А если писать имена вроде tb2020fff или bShadow-50100500 еще запутаннее будет.


      1. bBars
        20.06.2018 20:12
        #18798457

        Мне кажется, что если бы библиотека и была полезной, то как раз классификацией.
        Что могло быть полезного в бутстрапе с модификаторами .text-1, .text-2 или .block-1 .block-2 .block-n?


  1. justboris
    21.06.2018 10:24
    #18799693

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