В последнее время все больше и больше разговоров возникает о IE6, точней о том, когда же здохнет попрощается с нами и весь мир начнет переходить на многообещающий css3.

Одним из ярких примеров использования css3 является создание теней для блоков. Существует довольно таки большое количество способов создания тени и на css2, но для этого нужны дополнительные блоки <div> и .png изображения уголков, а вместе с ним и хаки для все того же IE6, чтоб он работал с .png. Все это начинает сказываться на читабельности кода, непонятным глюкам да и вообще на сложности верстки таких страниц. И это все в то время, когда тень на боксах — это всего лишь часть дизайна и не более того.

В css3 есть такое свойство как box-shadow, которое и предназначено для создания тени. В настоящее время это свойство поддерживается в Safari / WebKit, а также в Firefox начиная с версии 3.5. Для IE существует фильтр DropShadow. Объединение этого фильтра с еще одни фильтром Glow позволяет добиться того, что и в IE поздних версий тень будет отображаться.



К сожалению, данный метод напрочь игнорируется очень популярным браузером Opera :(

Недостатки:

1. нет поддержки Opera или Firefox младше версии 3,5


2. фильтры могут конфликтовать с JQuery


3. тени в разных браузерах не совпадают

Преймущества:

… даже не знаю, все преймущества очевидны, но они убиваются, для меня по крайней мере точно, одной фразой «не поддерживается в Opera»

Ах да… кому интересно исходный css код:

div {
    filter: 
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
}

Вывод:

Я подозреваю, что по мере чтения этой статьи у многих из вас возник вопрос: «а для чего это все если… ?»
Отвечаю:
ну во-первых, может кому то и не надо под оперу верстать :)
а во-вторых, так… для развития, начнем потихоньку учить то, что нас ждет с приходом css3 ;)