Z-INDEX and BOX-SHADOW

Asked

Viewed 329 times

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>

inserir a descrição da imagem aqui

I’d like the header background to be above the logo, and that the shadow of the soon appear, that for some reason it is not being displayed.

html css
  • 2

    I could not play here. If possible create a fiddle with code working and include in question.

  • Get your codes to work at runtime, as @Renan said.

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 remove the pseudo selectors :before and :after.

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.