Z-INDEX and BOX-SHADOW

Question

Z-INDEX and BOX-SHADOW

Navigation

#1 by (1 votes)

3

I have the following code:

<style>

.all{
    width:100%;
    height:100%;
    background:url(images/background.jpg);
}
header{
    width: 100%;
    height: auto;
    display:inline-block;
    background:url(images/bordatopo.png) top repeat-x;
    margin-bottom:10px;
}
.header-center{
    width:60%;/*1200px*/
    margin:0 auto;
    height:auto;
    max-height:229px;
    overflow:hidden;
}
.logo{
    float: left;
    width: 35%;
    margin-bottom:15px;
}
.logo img{
    width:100%;
    /*padding:0 15px 15px 15px;*/
}
.menu {
    float: left;
    width: 65%;
}
.menu ul {
    float: left;
    margin-right: 1em;
    margin-top: 6em;
}
.menu li {
    font-size: 1.2em;
    margin:0 0 1em 2em;
    display: inline-block;
}
.menu li a {
    color: #8c7265;
    text-transform:uppercase;
    font-weight: bold;
    font-family:"Futura Medium";
    font-size:.8em;
}

.sombra{
    position:relative;
}
.sombra:before,.sombra:after{
    z-index:-1;
    position:absolute;
    content:"";
    bottom:15px;
    left:10px;
    width:50%;
    top:80%;
    max-width:300px;
    background:#777;
    -webkit-box-shadow:0 15px 10px #777;
    -moz-box-shadow:0 15px 10px #777;
    box-shadow:0 15px 10px #777;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.sombra:after{
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    transform:rotate(3deg);
    right:10px;
    left:auto;
}

</style>
    <header>
        <div class="header-center">
            <div class="logo sombra">
                <img src="images/logo2.png" alt="" width="100%">
            </div>
            <nav class="menu">
                <ul>
                    <li><a href="#produtos">Produtos</a></li>
                    <li><a href="#chadebebe">Chá de Bebe</a></li>
                    <li><a href="#contato">Contato</a></li>
                    <li>
                        <a href="">
                            <img src="images/icon_email.png" height="20" />
                        </a>
                        <a href="">
                            <img src="images/icon_fb.png" height="20" />
                        </a>
                        <a href="">
                            <img src="images/icon_insta.png" height="20" />
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

I would like the header background to be over the logo, and that the shadow of the logo appears, that for some reason it is not being displayed.

html css

asked by anonymous 20.02.2015 / 18:09

1 answer

Android Studio emulator with AMD processor Overlap of data to cycle through for

score 1 · Answer 1

I believe you should change your CSS code:

header{
    width: 100%;
    height: auto;
    display:inline-block;
    background:url(images/bordatopo.png) top repeat-x;
    margin-bottom:10px;
    z-index:999;
}

.logo img{
    z-index:-1;
    width:100%;
}

For the shadow to appear, try to get the pseudo selectors :before and :after .

But as renan mentioned in the comments, try adding a jsfiddle to make it easier.