Розбираємося, в чому різниця між CSS Box Shadow і Drop Shadow

19

Від автора: Drop Shadow. Веб-дизайнери тривалий час застосовували цю властивість для різних цілей, наприклад, для оформлення PNG, поки не була офіційно представлена специфікація CSS Level 3, в якій було введено властивість box-shadow. Я сам досі часто використовую drop-shadow, тому що це властивість дозволяє додати красиву текстуру в деяких контекстах, наприклад, при роботі з плоскими проектами.

А незабаром після введення box-shadow з’явилася робоча версія CSS-фільтрів, і в місці з ними метод drop-shadow(), який на перший погляд дуже схожий на box-shadow. Однак ці два методи відрізняються один від одного, і в цій статті ми порівняємо ці відмінності.

Для мене основна відмінність з’ясувалося на ранньому етапі, коли я почав працювати з box-shadow. Ось простий трикутник, не схожий на ті, що я робив раніше.

Давайте використовуємо його, щоб з’ясувати різницю між двома властивостями. Почнемо з shadow box CSS.

box-shadow

Додайте box-shadow для цього елемента і ви отримаєте наступне.

Це дратує, але має сенс. CSS використовує блокову модель, де межі елементів визначаються у вигляді прямокутника. Навіть у тих випадках, коли форма елемента не є блоком, блок все одно існує, і до нього застосовується тінь. Це був мій «момент ах-ха», коли я зрозумів, що значить box в box-shadow.

Фільтр CSS drop-shadow

Фільтри CSS дозволяють робити дивовижні речі. Візьмемо, приміром, gander. Його численні можливості дозволяють робити багато речей, які ми раніше використовували для макета в Photoshop.

Фільтри не прив’язані до блоку. Це означає, що розпізнається контур нашого трикутника, а прозорість навколо нього ігнорується, так що для нашої фігури буде задана тінь по контуру.

Який метод використовувати?

Відповідь повністю залежить від вас. З наведеного вище простого прикладу може здатися, що фільтр drop-shadow() краще, але це несправедливе порівняння переваг або навіть можливостей обох методів. Це всього лише ілюстрація їх різного поведінки в конкретному контексті.

Як і в більшості випадків при розробці, відповідь на питання, який метод використовувати, залежить від конкретних завдань. У наведеній нижче таблиці наведено порівняння обох методів, щоб ви могли вирішити для себе, який з них краще використовувати в якому разі.

Розбираємося, в чому різниця між CSS Box Shadow і Drop Shadow

Висновок

Різниця між box-shadow та filter: drop-shadow() насправді визначається співвідношенням з блочною моделлю CSS. Один метод її бачить, а інший-ігнорує. Існують і інші відмінності, зумовлювані підтримкою браузерами, продуктивністю і т. д. Але те, як ці два методи співвідносяться з блочною моделлю, є ключовою відмінністю.

Оновлення: Amelia написала в коментарях про ще одному ключовому відмінність, а саме, радіус поширення для drop-shadow() обчислюється відмінно від box-shadow і навіть від text-shadow. Це означає, що радіус поширення, який ви можете вказати box-shadow, не є ідентичним значенням для drop-shadow, тому в деяких випадках вони не є рівнозначними замінами один для одного.

Давайте підведемо риску з допомогою цих чудових прикладів, що ілюструють різницю між двома методами. Леннарт Шоорс також написав відмінний огляд на цю тему з практичними прикладами і використанням підказок і тконок. Ми його раніше приводили.