Кроссбраузерный box-shadow

Здравствуйте, дорогие читатели. Сегодня хочу с вами поделиться чрезвычайно простым способом кроссбраузерной реализации css-свойства box-shadow. Способ настолько простой и очевидный, что я был чрезвычайно удивлен тем, что не смог найти на просторах интернета аналогичного решения (хотя я более чем уверен, что не являюсь первооткрывателем).



Итак для начала css для нормальных браузеров.

Copy Source | Copy HTML

1. div {
2.     background: green; /* обязательно для ie */
3.     -webkit-box-shadow: 0px 0px 15px #222;
4.     -moz-box-shadow: 0px 0px 15px #222;
5.     box-shadow: 0px 0px 15px #222;
6. }

Суть реализации свойства box-shadow для ie сводится к четырёхкратному применению фильтра shadow с разными значениями direction. Таким образом тень начинает обрамлять весь контур контейнера.

Copy Source | Copy HTML

1. <!--[if IE]>
2. <style type="text/css">
3.     div {
4.         filter:
5.         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6)
6.         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6)
7.         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=225, Strength=6)
8.         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=315, Strength=6);
9.         position: relative;
10.         top: -12px;
11.         left: -12px;
12.         zoom: 1;
13.     }
14. </style>
15. <![endif]-->

Несколько нюансов, на которые стоит обратить внимание:

• Тень, при использовании фильтра получается темнее, поэтому, чтобы добиться идентичности, нужно поиграться с параметрами color и strength
• IE увеличивает размеры блока на ширину тени, а так как для каждой стороны у нас по сути две тени, то и увеличение размеров становится двоекратным. Т.е. в конце нам нужно относительно сместить блок влево и вверх по формуле left = top = -(strength*2)
• IE6 и IE7 требуют hasLayout, поэтому для них ставим zoom: 1 (или ширину, высоту и другие свойства, которые присваивают hasLayout)
• Для блока обязательно нужно задавать фон, иначе фильтр будет применяться к дочерним элементам

Минусы:

• Фильтры — это всегда лишние тормоза
• IE выключает сглаживание текста внутри блока с фильтрами
• Тень в IE по форме отличается от тени в других браузерах (более квадратная)
• Внутри таким образом оформленного блока перестаёт работать alphaImageLoader (возможно и другие фильтры тоже — не проверял)

Итоговый пример.

На этом всё. Спасибо за внимание.