Тени¶

Существует несколько способов добавления теней к тексту и элементам в CSS. В этом модуле вы узнаете, как использовать каждый из этих способов и для каких задач они предназначены.

Допустим, вам прислали проект, который нужно создать, и в этом проекте есть изображение футболки, вырезанное, с падающей тенью. Дизайнер говорит вам, что изображение продукта является динамическим и может обновляться через систему управления контентом, поэтому и падающая тень должна быть динамической. Вместо футболки изображение может быть козырьком, шортами или любым другим предметом. Как это сделать с помощью CSS?

В CSS есть свойства box-shadow и text-shadow, но картинка — это не текст, поэтому использовать text-shadow нельзя. Если использовать box-shadow, то тень будет лежать на окружающем блоке, а не на футболке.

К счастью, есть и другой вариант: фильтр drop-shadow(). Он позволяет сделать именно то, о чем просил дизайнер. Существует множество вариантов использования теней в CSS, каждый из которых предназначен для разных случаев.

Тень блока¶

Свойство box-shadow предназначено для добавления тени к блоку HTML-элемента. Оно работает для блочных и инлайн-элементов.

1
2
3

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Порядок значений для box-shadow следующий:

1. Горизонтальное смещение: положительное число сдвигает его влево, а отрицательное — вправо.
2. Вертикальное смещение: положительное число сдвигает его сверху вниз, а отрицательное — снизу вверх.
3. Радиус размытия: при большем значении тень будет более размытой, а при меньшем — более резкой.
4. Радиус размытия (необязательно): большее число увеличивает размер тени, а меньшее — уменьшает, при этом радиус размытия будет равен радиусу размытия, если он установлен в 0.
5. Цвет: Любое допустимое значение цвета. Если он не задан, то будет использоваться вычисленный цвет текста.

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

1
2
3
4
5
6
7
8
9

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Множественные тени¶

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

1
2
3
4
5
6

.my-element {
    box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px
            20px 5px dodgerblue,
        inset 0px 0px 10px 2px darkslategray, inset 0px 0px
            20px 10px steelblue;
}

Свойства, влияющие на тень блока¶

Добавление border-radius к блоку также повлияет на форму его тени. Это связано с тем, что CSS создает тень на основе формы блока, как будто на него направлен свет.

1
2
3
4

.my-element {
    box-shadow: 0px 0px 20px 5px darkslateblue;
    border-radius: 25px;
}

Если блок с box-shadow находится в контейнере, имеющем overflow: hidden, то тень не выйдет за пределы этого переполнения.

1
2
3
4
5

<div class="my-parent">
    <div class="my-shadow">
        My shadow is hidden by my parent.
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.my-parent,
.my-shadow {
    width: 250px;
    height: 250px;
}

.my-shadow {
    box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
    overflow: hidden;
}

Тень текста¶

Свойство text-shadow очень похоже на свойство box-shadow. Только работает оно для текстовых узлов.

1
2
3

.my-element {
    text-shadow: 3px 3px 3px hotpink;
}

Значения для text-shadow те же, что и для box-shadow, и расположены в том же порядке. Единственное отличие заключается в том, что text-shadow не имеет значения spread и ключевого слова inset.

Значения для text-shadow те же, что и для box-shadow, и расположены в том же порядке. Единственное отличие заключается в том, что text-shadow не имеет значения spread и ключевого слова inset.

1
2
3
4

.my-element {
    text-shadow: 3px 3px 3px gold;
    color: rgb(0 0 0 / 70%);
}

Множественные тени текста¶

С помощью text-shadow, как и с помощью box-shadow, можно добавлять сколько угодно теней. Добавьте коллекцию наборов значений, разделенных запятыми, и вы сможете создавать действительно интересные текстовые эффекты, например, 3D-текст.

1
2
3
4

.my-element {
    text-shadow: 1px 1px 0px white, 2px 2px 0px firebrick;
    color: darkslategray;
}

drop-shadow()¶

Чтобы получить падающую тень, повторяющую все возможные изгибы изображения, используйте фильтр CSS drop-shadow. Эта тень применяется к альфа-маске, что делает ее очень удобной для добавления тени к вырезанному изображению, как в случае, показанном во введении этого модуля.

1
2
3

.my-image {
    filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%));
}

Фильтр drop-shadow имеет те же значения, что и box-shadow, однако ключевое слово inset и значение spread не допускаются. Вы можете добавить столько теней, сколько захотите, добавив несколько экземпляров значений drop-shadow к свойству filter. Каждая тень будет использовать предыдущую тень в качестве опорной точки позиционирования.

Источник: Shadows

Комментарии