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

0 ∞

В последнее время было много разговоров насчет того, чем отличаются свойство CSS box-shadow и фильтр drop-shadow CSS. Первое используется уже в течение длительного времени и хорошо поддерживается в современных браузерах; последний является переводом 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);
}

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

Содержание
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 CSS
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); 
filter: url(shadow.svg#drop-shadow);
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

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

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

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

Другие различия

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

Другие различия
CSS-свойство text-shadow
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);
Другие различия - 2
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);
border: 3px dashed #262b57;
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);

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

Изучаем свойство padding в CSS и свойство margin в 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 тень вокруг блока с помощью обоих методов?

Вывод

Webkit будет "дублировать" тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow.

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