CODEWITHSUNDEEP
htmlcss
AtlanteanTec
AtlanteanTec

Reputation: 93

CSS Box shadow disappears

I am trying to implement effect number 2 as seen at the following site: http://cssdeck.com/labs/different-css3-box-shadows-effects

So far, I am able to do this porperly, but when I add any more html content to the page, the effect disappears. Here is a sample fiddle with what I have so far: http://jsfiddle.net/aHrB7/

Part of the HTML:

<div class="header">
    <img id="imgLogo" src="http://iconpacks.mozdev.org/images/firefox2005-icon.png" width=30px height=20px  /> 

    <div class="divContentSizer">
   <span class="spnName">Master Chief</span> <!-- End spnName -->
</div> 

<div class="clearfix"></div> <!-- End clearfix -->
  </div>

Here is the CSS I am using for that:

.clearfix {
   *zoom: 1;
}

.clearfix:before,
.clearfix:after {
   display: table;
   content: "";
   line-height: 0;
}

.clearfix:after {
   clear: both;
}

.header {
   position: relative;
   width: 100%;
   background: #fff;
   padding-top: 10px;
   padding-bottom: 10px;
}

.header:before, .header:after {
   z-index:-1;
   position: absolute;
   display:table;
   content: "";
   top:30px;
   left: 10px;
   width: 50%; 
   padding: .3em .3em;
   max-width:300px;
   background: rgba(0, 0, 0, 0.2); 
   -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.2);   
   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.header:after  {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

#imgLogo {
float: left;
padding-left:30px;
}

.divContentSizer {
text-align: center;
vertical-align: middle;
width: 960px;
margin: 0 auto;
}

.spnName {
padding-top: 3px;
font-size: 1.5em;
color: #273137;
}

The header class div is what I am trying to have the box shadows show up for and I have commented what part to delete to see the effect show up again.

Does anyone know why this happens and what I can do to fix it? Any insight would be helpful! Please and thank you!

Upvotes: 3

Views: 11993

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13526

As far as I understand, it's because .header doesn't generate its own stacking context (since its z-index is auto), so z-index: 1 for pseudo-elements that make shadow means that they are stacked behind the body. If .header is the only content of body, body just is as tall as .header and doesn't completely hide the shadows, but when it becomes taller, it does.

To prevent body from hiding the shadow with its background, you can do the following trick: make its background transparent and set the main background only to the root element.

html {
    background: #f9f8f8;
}

body {
    background: transparent;
}

The result you can see in this fiddle.

Upvotes: 4

omma2289
omma2289

Reputation: 54619

Set a z-index to your container, that seems to fix the problem

.container{
    z-index:0;
    position: relative;
}

Upvotes: 6

Related Questions