Комментариев нет

Здравствуйте, уважаемые читатели!
Сегодня я хочу рассмотреть с вами небольшую разработку, которая уже набирает популярность и может пригодиться многим разработчикам, упростив поиск и подбор подходящих элементов при создании веб страниц.
Box-shadows.css — это библиотека простых и приятных теней (box-shadow) для вашего сайта. Главная цель заключается в том, чтобы с помощью кода создать чистый, легкий и современный дизайн. Коллекция содержит наиболее популярные виды теней и отлично подходит для использования в таблицах, контейнерах, сайдбарах, навигации и других внутренних блоках вашего сайта. Помимо простого использования тени, библиотека позволяет настраивать hover эффекты, плавную анимацию и создание внутренних теней для отдельных блоков, выбранных вами по необходимости. Это действительно интересный проект и он прекрасно работает. Давайте подробно рассмотрим его.

Начало работы с Box-shadows.css

Во-первых, хочется сразу сказать, что box-shadows.css это кросс-браузерная коллекция css теней, а значит вам не придется думать о корректности отображения ваших контейнеров в различных браузерах. Все уже сделано за вас и для вас. Просто подключите все необходимое и пользуйтесь в своё удовольствие. Обо всех особенностях использования этой библиотеки мы сейчас и поговорим.

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

Первое с чего нужно начать работу, это размещение основного css файла после открывающего тега head вашего проекта. Файла два, поэтому вы можете подключить удобный для вас:

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

Альтернативный способ подключения — загрузка файла на свой сервер. Скачайте файлы box-shadows.css или box-shadows.min.css на свой компьютер и загрузите в директорию вашего сайта, установив один из файлов в head сайта таким образом:

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

Каким способом подключать библиотеку — решать вам. Делайте как вам удобнее. Я использую cms WordPress, поэтому я подключил файл box-shadows.min.css напрямую через functions.php. Об этом мы поговорим ниже.

Работа с html. Подключение классов

Вторым пунктом у нас идет подключение класса .bShadow к блоку или контейнеру, который вы хотите использовать. Например так,

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

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

Добавление номерного класса

Box-shadows.css не использует особые имена для отдельных блоков, как это сделано, например, в библиотеке анимации. Здесь работа упрощается за счет использования порядковых чисел, например .bShadow-31.
Для подключения определенной тени к блоку, вам необходимо добавить в блок один из таких классов.

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

или добавьте отдельно

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

Сейчас коллекция содержит более 45-ти теней с номером, включая основные блоки: Shadow, Shadow-light и Shadow-inset.
Выбирайте нужные вам тени и наслаждайтесь классным дизайном вашего сайта.

Расширенные возможности box-shadows.css

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

Библиотека теней включает в себя возможность использования эффектов при наведении. Это сделано благодаря добавлению одной буквы h в конце каждого номерного класса, например .bShadow-13h.
Пример:

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

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

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

Пример:

<style>
.transform-translateY-5:hover {
    -webkit-transform: translateY(-5px) translateZ(0);
    transform: translateY(-5px) translateZ(0); 
</style>
<div class="bShadow transform-translateY-5 bShadow-1h">bShadow</div>

Создание внутренней тени блока

Чтобы создать внутреннюю тень блока, такую как box-shadow: inset , вам необходимо добавить скрипт в удобное для вас место на странице html и указать в нем классы, для которых вы хотите применить этот параметр.

Посмотрим на примере класса .bShadow-1.

WordPress Functions.php

Если вы используете CMS, такую как Вордпресс, то вы можете использовать библиотеку просто подключив ее в functions.php вашей темы.

wp_enqueue_style( 'bShadows-style', '//../../box-shadows.min.css', array(), '1.0.1'  );

Не забывайте следить за изменениями библиотеки и обновлять версию. Сделать это можно заменив 1.0.1 на новую, например 1.0.2.

Подведем итоги.

Чтобы использовать библиотеку box-shadows.css на вашем веб-сайте, просто подключите таблицу стилей в <head> вашего проекта, добавьте класс с номером bShadow к необходимому блоку вместе с основным классом или отдельно от него. По желанию, вы можете добавить эффект для наведения и внутреннюю тень.
Вот и все! Теперь у вас есть блок CSS с тенью. Пробуйте, экспериментируйте, используйте все что хотите и как хотите! Удачи!
Если вы использовали библиотеку на своем сайте, у вас остались вопросы или вы просто хотите оставить отзыв, пишите в комментариях.

Ссылки на проект:

Документация: README.md
Страничка проекта
Репозиторий

Автор: Андрей Шарапов
Источник: madeas.ru

Возможно Вас также заинтересует…