Подкаст CSS – 017: Тени
Предположим, вам прислали эскиз, и в нем есть вырезанное изображение футболки с тенью. Дизайнер сообщает вам, что изображение продукта является динамическим и может обновляться через систему управления контентом, поэтому тень тоже должна быть динамической. Вместо футболки изображением может быть козырек или шорты, или любой другой предмет. Как это сделать с помощью CSS?
CSS имеет свойства box-shadow и text-shadow , но изображение не является текстом, поэтому вы не можете использовать text-shadow . Если вы используете box-shadow , тень будет на окружающем поле, а не на футболке.
К счастью, есть еще один вариант: фильтр drop-shadow() . Это позволяет вам сделать именно то, что просил дизайнер. Когда дело доходит до теней в CSS, существует множество вариантов, каждый из которых предназначен для разных вариантов использования.
Тень коробки
Свойство box-shadow предназначено для добавления теней к окну HTML-элемента. Он работает с блочными и встроенными элементами.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
Порядок значений box-shadow следующий:
- Горизонтальное смещение : положительное число выталкивает его слева, а отрицательное число выталкивает справа.
- Вертикальное смещение : положительное число смещает его сверху вниз, а отрицательное число смещает снизу вверх.
- Радиус размытия : большее значение дает более размытую тень, тогда как меньшее значение дает более резкую тень.
- Радиус распространения (необязательно): большее число увеличивает размер тени, а меньшее число уменьшает его, делая его таким же размером, как радиус размытия , если он установлен на 0.
- Цвет : любое допустимое значение цвета . Если это не определено, будет использоваться вычисленный цвет текста.
Чтобы сделать тень блока внутренней тенью, а не внешней тенью по умолчанию, добавьте ключевое слово inset перед другими свойствами.
/* 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 . Для этого добавьте коллекцию наборов значений, разделенную запятыми:
.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 создает тень на основе формы блока, как будто на него направлен свет.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
Если ваш ящик с box-shadow находится в контейнере с overflow: hidden , тень также не выйдет за пределы этого переполнения.
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.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 . Он работает только с текстовыми узлами.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
Значения text-shadow такие же, как box-shadow , и в том же порядке. Единственное отличие состоит в том, что text-shadow не имеет значения spread и ключевого слова- inset .
Когда вы добавляете box-shadow она обрезается по форме вашего блока, но text-shadow не обрезается. Это означает, что если ваш текст полностью или полупрозрачен, тень будет видна сквозь него.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Несколько теней
Вы можете добавить столько теней, сколько захотите, с помощью text-shadow , как и с помощью box-shadow . Добавьте коллекцию наборов значений, разделенных запятыми, и вы сможете создать действительно крутые текстовые эффекты, например трехмерный текст.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
Тень
Чтобы добиться тени, повторяющей любые потенциальные изгибы изображения, используйте фильтр CSS drop-shadow . Эта тень применяется к альфа-маске, что делает ее очень полезной для добавления тени к вырезанному изображению, как в случае во введении к этому модулю.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
Фильтр drop-shadow имеет те же значения, что и box-shadow , но ключевое слово inset и значение spread не допускаются. Вы можете добавить столько теней, сколько захотите, добавив несколько экземпляров значений drop-shadow в свойство filter . Каждая тень будет использовать последнюю тень в качестве ориентира позиционирования.
Проверьте свое понимание
Проверьте свои знания о тенях
Какое значение тени ниже уникально для box-shadow ?
insetinset — это ключевое слово , которое также уникально для box-shadow .Одновременно на элементе допускается только 13 теней.