От автора: Drop Shadow. Веб-дизайнеры долгое время применяли это свойство для различных целей, например, для оформления PNG, пока не была официально представлена спецификация CSS Level 3, в которой было введено свойство box-shadow. Я сам до сих пор часто использую drop-shadow, потому что это свойство позволяет добавить красивую текстуру в некоторых контекстах, например, при работе с плоскими проектами.
А вскоре после введения box-shadow появилась рабочая версия CSS-фильтров, и в месте с ними метод drop-shadow(), который на первый взгляд очень похож на box-shadow. Однако эти два метода отличаются друг от друга, и в этой статье мы сравним эти отличия.
Для меня основное различие выяснилось на раннем этапе, когда я начал работать с box-shadow. Вот простой треугольник, не похожий на те, что я делал ранее.
Давайте используем его, чтобы выяснить разницу между двумя свойствами. Начнем с box shadow CSS.
box-shadow
Добавьте box-shadow для этого элемента и вы получите следующее.
Это раздражает, но имеет смысл. CSS использует блочную модель, где границы элементов определяются в виде прямоугольника. Даже в тех случаях, когда форма элемента не является блоком, блок все равно существует, и к нему применяется тень. Это был мой «момент ах-ха», когда я понял, что значит box в box-shadow.
Фильтр CSS drop-shadow
Фильтры CSS позволяют делать удивительные вещи. Возьмем, к примеру, gander. Его многочисленные возможности позволяют делать много вещей, которые мы ранее использовали для макета в Photoshop.
Фильтры не привязаны к блоку. Это означает, что распознается контур нашего треугольника, а прозрачность вокруг него игнорируется, так что для нашей фигуры будет задана тень по контуру.
Какой метод использовать?
Ответ полностью зависит от вас. Из приведенного выше простого примера может показаться, что фильтр drop-shadow() лучше, но это несправедливое сравнение преимуществ или даже возможностей обоих методов. Это всего лишь иллюстрация их разного поведения в конкретном контексте.
Как и в большинстве случаев при разработке, ответ на вопрос, какой метод использовать, зависит от конкретных задач. В приведенной ниже таблице приведено сравнение обоих методов, чтобы вы могли решить для себя, который из них лучше использовать в каком случае.
Заключение
Разница между box-shadow и filter: drop-shadow() на самом деле определяется соотношением с блочной моделью CSS. Один метод ее видит, а другой игнорирует. Существуют и другие отличия, обуславливаемые поддержкой браузерами, производительностью и т. д. Но то, как эти два метода соотносятся с блочной моделью, является ключевым отличием.
Обновление: Amelia написала в комментариях об еще одном ключевом различие, а именно, радиус распространения для drop-shadow() вычисляется отлично от box-shadow и даже от text-shadow. Это означает, что радиус распространения, который вы можете указать в box-shadow, не является идентичным значением для drop-shadow, поэтому в некоторых случаях они не являются равнозначными заменами друг для друга.
Давайте подведем черту с помощью этих замечательных примеров, иллюстрирующих разницу между двумя методами. Леннарт Шоорс также написал отличный обзор на эту тему с практическими примерами и использованием подсказок и тконок. Мы его ранее приводили.
Автор: Geoff Graham
Источник: //css-tricks.com/
Редакция: Команда webformyself.
