Тени

Подкаст CSS – 017: Тени

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

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

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

Тень коробки

Поддержка браузера

  • Хром: 10.
  • Край: 12.
  • Фаерфокс: 4.
  • Сафари: 5.1.

Источник

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

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

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

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

Чтобы сделать тень блока внутренней тенью, а не внешней тенью по умолчанию, добавьте ключевое слово 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;
}

Тень текста

Поддержка браузера

  • Хром: 2.
  • Край: 12.
  • Фаерфокс: 3.5.
  • Сафари: 1.1.

Источник

Свойство 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 ?

Горизонтальное смещение
Попробуйте еще раз!
Вертикальное смещение
Попробуйте еще раз!
Радиус размытия
Попробуйте еще раз!
Радиус распространения
🎉
Цвет
Попробуйте еще раз!
inset
Попробуйте еще раз! inset — это ключевое слово , которое также уникально для box-shadow .

Одновременно на элементе допускается только 13 теней.

Истинный
Официального ограничения нет.
ЛОЖЬ
Добавьте столько теней, сколько вам нужно.