Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение

В последнее время было много разговоров насчет того, чем отличаются свойство CSS box-shadow и фильтр drop-shadow. Первое используется в течение длительного времени и отлично поддерживается в современных браузерах; последний будет переводом SVG в CSS и в настоящее время имеет в себя поддержку в Chrome, Firefox и Safari. На первый взгляд способы создания при помощи CSS тени блока и при помощи фильтров дают тот же результат: даже синтаксис у них похож.

Но как мы увидим, между ними существуют весьма значительные различия:

.shadowCSS {box-shadow: 12px 12px 7px rgba(0,0,0,0.5);}.shadowfilter {-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));filter: url(shadow.svg#drop-shadow);}

В данной статье будет приведено их полное сравнение: гибкость, скорость вывода и качество. Для ясности разные вендорные префиксы мы рассматривать не будем:


Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение

border-image:url(gold-picture-frame.png) 81 83 82 84;border-width: 60px;filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));filter: url(shadow.svg#drop-shadow);

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

Это также справедливо для border-images, при условии, что изображение рамки будет PNG с альфа-маской.

Фильтр drop-shadow учитывает добавление таких псевдо-элементов, как :before и :after. Обратите внимание, что в версии с фильтром тень повторяет форму треугольника:

Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); filter: url(shadow.svg#drop-shadow);
Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

Ограничения фильтра drop-shadow

Недостатки использования фильтра:

  • Чтобы создавать такую объемную тень внизу блока CSS, как при помощи box-shadow, фильтр drop-shadow должен поддерживать четвертое значение spread. Но в текущей реализации Webkit четвертое значение будет расцениваться как ошибка, и тень в этом случае не отображается вообще;
  • Спецификация фильтра не поддерживает значение inset, так что при помощи кода фильтра вы не сможете без труда создавать внутреннюю тень.

Иные различия

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

Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение
border: 3px solid #262b57; width: 150px; height:150px;border-radius: 10px;transform: rotate(8deg);box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));filter: url(shadow.svg#drop-shadow);
Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение
border: 3px dashed #262b57;box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));filter: url(shadow.svg#drop-shadow);

Поскольку фильтр создает тень по бокам блока CSS только для рамки(которая в данном случае имеет в себя толщину всего в четыре пикселя), то версия тени при помощи фильтра выглядит светлее.

Вердикт

Фильтр(drop-shadow), безусловно, будет победителем в этом раунде: он имеет в себя большую гибкость, а его недостатки проявляются только, если речь идет о внутренней тени и отсутствии ее распределения.

Скорость и качество

Качество выведения теней, полученных при помощи данных двух методов, примерно одинаково. Фильтры drop-shadow имеют преимущество аппаратного ускорения, если браузер поддерживает его; box-shadow не имеет в себя доступа к нему. При иных равных условиях фильтр drop-shadow CSS внутреннюю тень блока отображает быстрее.

Отображение

На данном этапе мы можем установить пару простых правил:

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

Если у вас есть PNG -изображение с альфа-маской, существует пару вариантов реализации:

  • Создайте тени при помощи Photoshop, чтобы все браузеры отображали их одинаково;
  • Оставьте изображение без изменения и используйте фильтр drop-shadow, учитывая, что на данный момент только Webkit-браузеры будут отображать эту тень.
  • Попробуйте применить к контенту SVG-фильтр drop-shadow, чтобы тень одинаково распознавалась в иных браузерах.

Если элемент имеет в себя неоднородный контур, который не задается при помощи border-radius, почему бы не создать CSS тень вокруг блока при помощи обоих способов?

Свойство box-shadow против фильтра drop-shadow filter: Подробное сравнение Webkit будет «дублировать» тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow.

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

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

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