Какая CSS тень лучше box-shadow или drop-shadow?

Какая CSS тень лучше box-shadow или drop-shadow

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

Раньше, еще до CSS3, дизайнеры, веб-разработчики часто пытались подделать тени обычными PNG изображениями, но, как мы знаем, это выглядело скажем так, не очень. Благодаря CSS3 (CSS Level 3) мир узнал о таком чудесном свойстве как box-shadow. Затем, спустя короткое время, в свет вышло свойство drop-shadow, которое на первый взгляд очень похоже, но на деле, совершенно другое. Давайте же возьмем и сравним 2 этих свойства, благодаря CSS песочнице.

Вот как выглядит простой треугольник:

cssbox

А вот как выглядит такой же треугольник но уже с использованием box-shadow:

cssboxshadow

К сожалению, это очень раздражает, но все же имеет смысл. CSS использует модель коробки (box), в которой ребра элемента связаны в виде прямоугольника. Даже в тех случаях, когда форма элемента не является полем, поле все еще существует, и к нему применяется тень.

CSS Filter Drop Shadow

Фильтры CSS довольно удивительны, после применения drop-shadow, мы видим, что CSS вдруг начинает делать много вещей, которые мы использовали для макета в Photoshop.

Фильтры не привязаны к коробке. Это означает, что контур нашего треугольника распознается, а прозрачность вокруг него игнорируется, так что предполагаемая форма получает тень.

Какой метод лучше

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

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

сравнение box-shadow и drop-shadow

Итого

Разница между box-shadow и drop-shadow сводится к модели CSS-box. Один видит его, другой игнорирует. Существуют и другие отличия, которые отличают их в плане поддержки браузера, производительности и т.д., но самым основным является то, как эти 2 метода рассматривают модель CSS-box.

Давайте рассмотрим еще пару замечательных примеров. 

Пример с тенями css

Пример с тенями css

Ссылка на оригинальную статью: Перейти

Комментарии

Здравствуйте!

Сустанон, дека дураболин!

Анаболические стероиды наложенным платежом.
Оплата при получении на почте.

Sustanon 250 - http://doping-shop.com/item/74

Testosterona propionat - http://doping-shop.com/item/68

Deca durabolin - http://doping-shop.com/item/67

Метан - http://doping-shop.com/item/50

Все препараты проверенные и рабочие!

Наш сайт: http://doping-shop.com
Связь с нами: http://doping-shop.com/feedback