Свойство CSS box-shadow против фильтра drop-shadow filter: Подробное сравнение
В последнее время было много разговоров насчет того, чем отличаются свойство 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. Обратите внимание, что в версии с фильтром тень повторяет форму треугольника:
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 нет:
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);
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 только для рамки (которая в данном случае имеет толщину всего в четыре пикселя), то версия тени с помощью фильтра выглядит светлее.
Вердикт
Фильтр (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.
Как видите, эти два способа во многом отличаются друг от друга. Надеюсь, эта статья поможет вам решить, какой из них использовать в своих проектах.