Drop-Shadow: недооцененный фильтр CSS

Drop-Shadow: недооцененный фильтр CSS

От автора: если вы знакомы с CSS, вы, вероятно, знаете об свойстве box-shadow все. Но знаете ли вы, что существует фильтр CSS drop-shadow, который делает нечто подобное? Например, box-shadow, мы можем передать значения для x-offset, y-offset, радиуса размытия и цвета.

Пример кода:

В отличие от этого box-shadow, он не принимает параметр spread (подробнее об этом позже).

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чем полезен drop-shadow? Если есть box-shadow, то зачем вообще нужен drop-shadow?

Непрямоугольные фигуры

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

Мы можем сравнить эффект box-shadow с drop-shadow:

Drop-Shadow: недооцененный фильтр CSS

Использование box-shadow дает нам прямоугольную тень, даже если элемент не имеет фона, а drop-shadow создает тень от непрозрачных частей изображения.

Демонстрация

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

Обрезанные элементы

Если мы обрезаем или маскируем элемент с помощью clip-path или mask-image, любой box-shadow, добавляемый нами к элементу, также будет обрезан — поэтому он будет невидимым, если находится за пределами обрезанной области.

Но мы можем создать тень для обрезанного элемента, применив фильтр drop-shadow к родительскому элементу. Довольно круто!

Drop-Shadow: недооцененный фильтр CSS

Фильтр drop-shadow применяется к родительскому элементу обрезанной фигуры.

Посмотреть демо

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сгруппированные элементы

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

Drop-Shadow: недооцененный фильтр CSS

Box-shadow, примененный к компоненту

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

Drop-Shadow: недооцененный фильтр CSS

Box-shadow, примененный к столбцам

Но, используя drop-shadow для всего компонента, мы получаем тень именно там, где хотим, не прибегая к хитростям:

Drop-Shadow: недооцененный фильтр CSS

drop-shadow, примененный к компоненту

Демонстрация

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

Вот забавная вещь: вы можете использовать несколько падающих теней для получения довольно крутых эффектов! Посмотрите следующую демонстрацию.

Примечание: переходы и анимация фильтров CSS не особенно эффективны, и, вероятно, лучше избегать одновременной анимации такого количества фильтров в реальных проектах. Это просто для удовольствия!

Ограничения

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

Предостережения

drop-shadow не отображает точно такой же эффект тени, как box-shadow, даже при тех же параметрах. box-shadow имеет тенденцию давать более темные и тяжелые тени, чем drop-shadow при использовании тех же значений. Я подозреваю, что это как-то связано с фильтрами CSS, основанными на примитивах фильтров SVG. В любом случае вам, вероятно, придется компенсировать разницу, несколько скорректировав значения drop-shadow.

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

Фильтры CSS (в том числе drop-shadow) поддерживаются во всех современных браузерах. Я склонен использовать его как прогрессивное улучшение, без необходимости обходного пути для старых браузеров, поскольку обычно это не что-то, что могло бы существенно повлиять на работу пользователя. Но если вам действительно нужно предоставить альтернативный стиль для старых браузеров, вы можете сделать это, используя запрос функции с запасным вариантом box-shadow:

Заключение

Несмотря на отличную поддержку, фильтр drop-shadow используется крайне редко. Я надеюсь, что в этой статье освещены некоторые случаи, когда это может избавить вас от хака box-shadow — возможно, вы могли бы использовать его в своем следующем проекте!

Автор: Michelle Barker

Источник: https://css-irl.info

Редакция: Команда webformyself.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.