Skype: My status
Делаем тень для блоков без использования рисунков PDF Печать E-mail
Раздел: Библиотека . Категория: CSS HTML

shadowЗадача максимально еффективно использовать css и создать тень для блока без использования рисунков и таблиц или любых других сложных конструкций.

На рисунке справа изображен пример использования для отображения категории в магазине VirtueMart

HTML-код:

<div class="mainContainer">
<!--[if IE]>
<div class="shadow"></div>
<![endif]-->
<div class="content">[тут какой-то контент]</div>
</div>

CSS-код:

.blurmainContainer {
display: inline-block;
position: relative;
margin: 10px;
-webkit-box-shadow: 0 0 30px #969696;
-moz-box-shadow: 0 0 30px #969696;
box-shadow: 0 0 30px #969696;
zoom: 1;
}
* html .blurmainContainer { /* устраняем для IE6 баг с высотой тени */
height: 1px;
}

.blurcontent {
border: 1px solid #aaa;
background: #fff;
padding: 20px;
zoom: 1;
position: relative;
z-index: 2;
}
.blurshadow {
width:100%;
height: 100%;
position: absolute;
z-index: 1;
top: -15px;
left: -15px;
background: #fff;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='.4');

Добавить комментарий


Защитный код
Обновить

Популярное

Последние комментарии

Пользователи : 463
Статьи : 65
Просмотры материалов : 846465

Реклама

абажуры, светильники и бра, картинные подсветки, настольные лампы, люстры и торшеры
В нашей компании расклейка объявлений по невысоким ценам.
открытие обособленного подразделения
клинковое холодное оружие
выставочные стенды производство
led лампы
Для вас со скидками визитки буклеты на выгодных условиях.
Для вас со скидками sonodec на выгодных условиях.