<rmcreative>

RSS

Блоки с тенью

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);

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

Комментарии RSS

  1. №956
    dkrnl
    dkrnl 08.12.2008, 6:21:50

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

  2. №958
    Чистяков Денис
    Чистяков Денис 08.12.2008, 7:02:08

    @dkrnl

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

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

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

  3. №959
    mobivart
    mobivart 08.12.2008, 9:34:42

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

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

  4. №960
    Sam
    Sam 08.12.2008, 13:44:45

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

  5. №961
    omfg
    omfg 08.12.2008, 18:45:51

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

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

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

  7. №965
    Sam
    Sam 09.12.2008, 12:07:44

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

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.