Unlimited rows with bottom and top shadows

Question

I need to implement shadows for the rows. That rows has no margins. So bottom shadow of the row 1 covers the row 2 top part.

I've create a jsFiddle example of what I need.

HTML

<div class="row-with-shadow" style="z-index:10"></div>
<div class="row-with-shadow" style="z-index:9"></div>
<div class="row-with-shadow" style="z-index:8"></div>
<div class="row-with-shadow" style="z-index:7"></div>
<div class="row-with-shadow" style="z-index:6"></div>
<div class="row-with-shadow" style="z-index:5"></div>
<div class="row-with-shadow" style="z-index:4"></div>
<div class="row-with-shadow" style="z-index:3"></div>
<div class="row-with-shadow" style="z-index:2"></div>
<div class="row-with-shadow" style="z-index:1"></div>

CSS

.row-with-shadow {
    height:100px;
    margin:0;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
    position:relative;
}

It seems that wouldn't work for the rows without bottom and top margins. ? It seems we have to add z-index for each row that case.

1 row - z-index 10

2 row - z-idndex 9

...

10 row - z-index 1

But what if we have unlimited rows? Do we need js to do that? What if we have 1000rows? it could be that z-index 1000 will cover any UI elements like light boxes.

examle http://jsfiddle.net/qh68V/

HTML

<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>
<div class="row-with-shadow"></div>

CSS

.row-with-shadow {
    height:100px;
    margin:3px;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
}

Answer 1

You can do it by using a :after element and applying the shadow to that..

.row-with-shadow {
    height:100px;
    padding:0;    
    border:1px solid #aaa;
    background:#eee;
    position:relative;
}
.row-with-shadow:after{
   content:'';
   position:absolute;
   top:0;left:0;right:0;bottom:0;
   box-shadow:0 3px 8px rgba(0,0,0,0.3);
   z-index:10;
}

demo at http://jsfiddle.net/qh68V/2