Всем привет.
Есть такая структура страницы:
<body>
<div class="wrap">
<div class="item">
</div>
</div>
</body>
для класса item заданы сложные наклонные тени, заданы они подобным способом:
.item:before,
.item:after {
content:"";
position:absolute;
z-index:-2;
bottom:10px;
left:10px;
width:47%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.item:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
Как видно, чтобы от псевдоэлементов (наклонные блоки) торчала только тень, он уводится на дальний слой с помощью z-index: -2;
Проблемка заключается в том, что если я задам тень диву с классом wrap, то наши тени пропадают, так как они уходят на невидимый слой, за наш заданный фон. Самому wrap задавать отрицательный z-index нельзя, так как внутри спрячется и весь контент.
Я в свое время решил проблему так. Создал еще один блок с id=background
<body>
<div id="background"></div>
<div class="wrap">
<div class="item">
</div>
</div>
</body>
И прописал ему следующие стили:
background: linear-gradient(110deg, #F3F3F3 1%, #F3F3F3 765px, #FFFFFF 766px, #FFFFFF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 900px;
position: absolute;
width: 1000px;
z-index: -10;
Все бы хорошо, но как видите, высота задана 900px, такую же высоту я задавал для wraper как min-height, чтобы якобы прилепить футер книзу, но потом я понял, что это не комильфо и прилепил футер к низу способом с отрицательным padding. Пытался я заменить height:900px на height:100%, но высота блока с идентификатором background получалась размером с экран, это и понятно, ведь внутри нет содержимого.
Как можно поменять структуру или какие css свойства применить, чтобы был и фон и не пропадали тени у элементов item?
Чтобы было наглядней, как должно выглядеть, вот сайт:
musaget.net
В этой версии футер не является плавающим и поэтому мой трюк с доп блоком с id=background работает, но, как я сказал, я сделал футер прилепленным к низу нормальным способом, а не костылем.
На данном сайте wraper=all, background=background, item=item
Простой
Простой