Блоки с тенью для всех браузеров, кроме Opera

Сейчас тень для блоков в CSS3 поддерживается браузерами: Firefox ≥ 3.1, Safari ≥ 3 и Chrome. В Internet Explorer тень можно эмулировать, используя его собственные фильтры (В IE ≥ 8 уже работает).

Тень, полученная таким образом в Internet Explorer, почти ни чем не отличается от тени в современных браузерах. Единственное неудобство - один дополнительный див.

Предлагаю кроссбраузерный вариант для блоков неизвестных размеров, исключая, естественно, браузер Opera (В Opera ≥ 10.5 уже работает (Спасибо Саше)).

HTML


<div class="shadow">
    <div class="frame">
        Содержимое контейнера
    </div>
</div>

CSS (для современных браузеров)


<style type="text/css">
.shadow {
    float:left;
}
.frame {
    position:relative;
    background:#fff;
    padding:10px; display:block;
    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
</style>

CSS (для Internet Explorer)


<!--[if IE]>
<style type="text/css">
.frame {
    left:4px; top:4px;
}
.shadow {
    background:#000;
    margin:-4px -4px;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');
}
</style>
<![endif]-->

Источник: www.cssplay.co.uk

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Марина

    Все отлично работает, НО в Internet Explorer background:#000; перекрывает (прячет) картинки в тексте! Может что-нибудь подскажите,пожалуйста!!!!!!!

  • В Опера 10.52 работает тень

    • Спасибо, поправил 😉