Блоки с тенью для всех браузеров, кроме 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

Похожие публикации:

1. Internet Explorer: max-width без javascript и expressions
   Предлагаю вам способ эмуляции max-width в IE6 на чистом CSS. Данный способ работает во всех современных браузерах без использования max-width,...
2. Проблема с прозрачностью файл-инпутов в Opera под Mac
   Верстая стилизованый файл-инпут по технологии Евгения Белодеда, столкнулся с проблемой - при задании нулевой прозрачности в браузере Opera под операционной...
3. Поддержка RGBA в Internet Explorer
   Как известно Internet Explorer не поддерживает указание цвета в RGBA, но большая часть фильтров понимает цвет в формате ARGB (alfa,...
4. Баг стилизации noscript-тега в Internet Explorer 8
   Содержимое тега <noscript> отображается, когда в настройках браузера выключена поддержка javascript. Сейчас по умолчанию данная поддержка включена во всех браузерах....
5. Таблица стилей под Opera
   При вёрстке очень часто используются CSS-хаки (сам не сторонник данного подхода), чтобы добиться одинакового отображения страницы в разных браузерах. Для...

Теги: CSS, Internet Explorer, Opera

Поделиться: