Блоки с тенью

8 декабря 2008

Решение на HTML + CSS. Работает в IE6+, Firefox, Opera и Safari.

Изображение (base64) включается в CSS для Firefox, Safari, Opera и IE8:

background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhE UgAAAAEAAAAkCAYAAABIdFAMAAAA P0lEQVQI17XEsRFAQBQFwPV+JNCBNm40oP9UAzoQYMYcVdhgYQjGYA6W YIUNDnigwxv4rR6cwV5ohalwFy7 IB4UICrGRngUUAAAAAElFTkSuQmCC );

Для IE6, IE7 используется фильтр Blur:

filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow='true', shadowopacity=0.5);

Рассматриваем

CSS
shadow

Комментарии RSS по email OK

№956

dkrnl 08 дек. 2008 г., 6:21:50

google chrome - тень белая, в других броузерах какойто мусор в районе левого вернего угла.
№958

Чистяков Денис 08 дек. 2008 г., 7:02:08

@dkrnl

Думаю, что что-то не так с картинкой )

А вообще способ интересный и очень даже удобный, особенно, если тень не сильно принципиальна, и в случае проблем как с хромом индивидуально ее отключить.

Спасибо, за всегда полезные находки.
№959

mobivart 08 дек. 2008 г., 9:34:42

В хроме реально тень белая.

А вот обама причём?
№960

Sam 08 дек. 2008 г., 13:44:45

Обама… просто чтобы интереснее было, наверное :)

№961

omfg 08 дек. 2008 г., 18:45:51

Трабла с верхним левым решаема)

.ui-shadow-border-nw{
    background-position:0 0;
    left:1px; /*вот тут им надо поправить, было 2px*/
    top:0;
}

№963

Octane 08 дек. 2008 г., 23:22:12

А вот и on-line сервис «DataURLMaker», чтобы преобразовывать изображения в «base64».
№965

Sam 09 дек. 2008 г., 12:07:44

Кстати, автор зафиксил хром.

<rmcreative>

Блоки с тенью

Комментарии RSS по email OK

Интересное

Друзья

Разделы