Вход | Регистрация | FAQ
Anonymous

фоны, тени, z-index

+ Ответить

Сообщений: 3 Страница 1 из 1


фоны, тени, z-index

makc9i » Ср мар 19, 2014 4:48 am

Всем привет.
Есть такая структура страницы:

Код: Выделить всё
<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
Аватара пользователя

makc9i

  • Сообщения: 2
  • Зарегистрирован: Ср мар 19, 2014 4:39 am

Re: фоны, тени, z-index

XainPro » Ср мар 19, 2014 6:58 am

я думаю, что это трудная задача, я надеюсь, что кто-то здесь есть экспертные знания CSS, чтобы помочь вам удачи
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm

Re: фоны, тени, z-index

makc9i » Ср мар 19, 2014 8:34 am

задача решалась до банального просто, нужно для html, body, #background прописать min-height:100% вместо height:100%
Аватара пользователя

makc9i

  • Сообщения: 2
  • Зарегистрирован: Ср мар 19, 2014 4:39 am


+ Ответить

Страница 1 из 1