Twitter Bootstrap Question posted in

Twitter bootstrap – box-shadow overridden by div background

I have some problem with adding shadows to a list of block elements. The Divs in this case have a background-color which overrides the shadow from the div above. To solve this i decrease the z-index on each element, but that is not a valid solution.

How would you solve this issue on a better way in pure html/css? And how would you solve this using Twitter bootstrap?

Here is my test code HTML/CSS

<div class="container" style="z-index:10">
    <h1>Box 1</h1>
 </div>
 <div class="container" style="z-index:5">
    <h1>Box 2</h1>
 </div>
 <div class="container" style="z-index:0">
    <h1>Box 3</h1>
 </div>


h1{margin:0;}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}

Thanks for any help

EDIT:
http://jsfiddle.net/42816g0x/5/

Some clarifications:
– the shadow needs to be on the div.container

  • the div should be able to have different bg colors, eg every odd div

  • the number of div.container can vary, I don’t want to manually add z-index on each

Edit 2:
I came up with a solution which I think is the best one, I don’t need to manually fiddle with the z-index, (because they are dynamically added through x nr items, varying times to times). Instead I use the pseudo class ::before to add shadow on the top.

.container::before{
    width: 100%;
    height: 5px;
    content:"";
    position: absolute;
    top: 0;
    left:0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.34)), color-stop(58%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
Tags:

4

Answers


  1. 0

    Change your css code for this

    h1{margin:0;}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
}
    <div class="container">
    <h1>Box 1</h1>
 </div>
 <div class="container">
    <h1>Box 2</h1>
 </div>
 <div class="container">
    <h1>Box 3</h1>
 </div>
    Login or Signup to reply.
  2. 0

    Try this. I have made some changes in css and html.

       h1{margin:0;
 -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}
     <div class="container">
    <h1>Box 1</h1>
    <h1>Box 2</h1>
    <h1>Box 3</h1>
 </div>

    Using Twitter bootstrap, check this:
    fiddle

    EDIT: ok, you got the solution. That’s good. Here is another option for your first EDIT question. DEMO This is using jquery. You can add following script code and jquery, jquery UI as shown in DEMO. You don’t need to add z-index manually. z-index can get applied to multiple div. 

    $(function() {
    var boxes = $("div");
    var z = 4;
        boxes.each(function() {
            $(this).zIndex(z--);
        });
});
    Login or Signup to reply.
  3. 0

    jsfiddle

    Just add position:relative for the z-index to work for you:

    .container{
position:relative;
background-color: yellow;
margin: 0;
padding: 0;
-webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
 }
    Login or Signup to reply.
  4. 0

    We’ll render the shadow in a pseudoelement (could be either before or after, it doesn’t matter) and assign a negative z-index to it.

    .container{ 
  position: relative;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  box-shadow: -5px 5px 20px 5px #000;
}

    For more details – Tutorial Here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search