Свойство box-shadow уже давно существует в CSS и довольно часто используется для различных блоков, в том числе и при наведении на них. В Figma или в Photoshop вы можете скопировать его в виде кода, чтобы не устанавливать параметры тени вручную. Однако стоит рассмотреть все же, что нужно указывать в этом свойстве.

Синтаксис box-shadow

Свойство box-shadow состоит  из пяти параметров: смещение по горизонтали, смещение по вертикали, размытие, растяжение и цвет тени. В начале вы можете указать необязательный параметр inset -  тогда тень будет внутренней.

В отличие от таких составных свойств, как background, transition или border, у box-shadow нет отдельных свойств, которые попадают в  произвольном порядке в составное, поэтому порядок свойств надо соблюдать.

Варианты использования параметров свойства box-shadow

Тень с нулевым смещением распределяется вокруг объекта

Тень вокруг элемента цвета текста
box-shadow: 0 0 10px;

Внутренняя тень с с аналогичными параметрами

Внутренняя тень
box-shadow: inset 0 0 10px;

Положительные значения для смещения

Смещение вниз и вправо
box-shadow: 5px 5px 10px;

Отрицательные значения для смещения

Смещение вверх и влево
box-shadow: -5px -5px 10px;

При указании цвета тень получается другой

Внутренняя тень с цветом
box-shadow: inset 0 0 5px 5px #1e8cbe;
Внешняя цветная тень
box-shadow: 0 0 5px 5px #1e8cbe;

Если отсутствует размытие, то оно приравнивается к 0

Смещение жесткой тени вниз без размытия
box-shadow: 20px 10px;
Смещение жесткой тени вверх
box-shadow: 10px -20px;

Большое значение размытия скругляет края тени

Большой радиус размытия тени
box-shadow: 5px 5px 20px;

Размер тени, или дистанции от тени до элемента (spread). При положительном значении тень увеличивается, выходя за пределы элемента, а при отрицательном - тень уменьшается и сжимается.

Положительное значение размера тени (spread)
box-shadow: 0 0 10px 5px;
Отрицательное значение размера тени (spread)
box-shadow: 0 10px 10px -5px;

Если не указать цвет тени, он будет совпадать с цветом текста

Значение цвета для тени по умолчанию
color: red;
box-shadow: 0 0 10px 5px;

Если цвет тени указан , то тень будет указанного цвета

Указываем значение цвета тени
color: red;
box-shadow: 0 0 10px 5px blue;

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

Множественные тени: вверху и внизу
box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;
Множественные тени: внутренняя и внешняя
  box-shadow: inset 10px 10px 10px 2px rgba(34, 60, 80, 0.2),
                10px 10px 10px 2px rgba(34, 60, 80, 0.2);

Тень может изменяться при наведении

Изменение тени при наведении
.box-hover {
    box-shadow: 0 0 5px 5px rgba(30, 30, 30, 0.5);
    transition: 0.5s;
}
.box-hover:hover {
    transform: scale(0.8);
    box-shadow: 10px 10px 15px 2px rgba(50, 50, 50, 0.2);
    transition: box-shadow 0.5s, transform 0.5s;
}

В случае, если для элемента прописано свойство clip-path, указывать тень нужно не с помощью свойства box-shadow, а с помощью свойства filter, причем задавать тень нужно элементу-обертке, а не тому, для которого указан clip-path.

Тень для элемента с clip-path
  .box-clip-path {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }
  .box-holder {
    filter: drop-shadow(5px 5px 5px rgba(60, 60, 60, .5));
  }

Все параметры свойства box-shadow вы можете попробовать и изменить в генераторе теней или прямо здесь в примере ниже.

See the Pen CSS Box Shadow Generator - Day 29 of #30Days30Projects by Ishaan Sheikh (@sheikh_ishaan) on CodePen.0

Пример с различными видами теней. Кликните для копирования по выбранному блоку.

See the Pen CSS Property box-shadow by Elen (@ambassador) on CodePen.0

Пример со множественными тенями

Для социальных иконок добавлены множественными тенями для самого элемента и для текста.

See the Pen box-shadow in social icons by Elen (@ambassador) on CodePen.0

Пример с иконками соцсетей от автора Akash bhandwalka. Здесь использовано изменение тени при наведении.

See the Pen social media share icons by Elen (@ambassador) on CodePen.0

Таблица цен

See the Pen CSS3 pricing table by Arkev (@arkev)
on CodePen.0

Пример с эффектами в виде теней, добавленных к псевдоэлементам ::before и ::after

See the Pen Box-shadow effects with ::before and ::after by Elen (@ambassador) on CodePen.0

Использование box-shadow для UI-элементов

Автор Maria Marin

See the Pen Neumorphic Elements by Maria Marin (@myacode) on CodePen.0

Кнопки с тенью при нажатии и без

Автор Burmese Potato

See the Pen Neumorphic Button @dribbble by Burmese Potato (@BurmesePotato) on CodePen.0

Пример изображения iPhone средствами HTML/CSS с использованием свойства box-shadow

Автор Fabrizio Bianchi

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@_fbrz) on CodePen.0

Пример MacBook

Автор Burak Can

See the Pen CSS only 3d Macbook Air by Burak Can (@neoberg) on CodePen.0

Пример с изменением тени в зависимости от положения курсора

Автор Marc López Ávila

See the Pen 3D CSS/JS dynamic shadow by Marc López Ávila (@Loopez10) on CodePen.0

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *