Responsive CSS3 Shadows

http://jenniferperrin.com/blog/responsive-css3-shadows

by landsurveyors

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<h1><a href="">Responsive CSS3 Shadows</a></h1>

<div class="box one">Things to do</div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
<div class="box seven"></div>

<p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.<br />
Visit <a href="http://jenniferperrin.com/blog/responsive-css3-shadows" target="_new">www.jenniferperrin.com</a> for more information on Responsive CSS3 Shadows.</p>

CSS

/* --- Demo Styles --- */
h1 { width: 200px; margin: 0 auto; }
h1 a {
    font-size: 24px;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(0,0,0,0.3);
    text-decoration: none;
}
h1 a:hover { color: rgba(0,0,0,0.2); }
p {
    width: 200px;
    margin: 0 auto 6px  auto;
    font-family: 'Yanone Kaffeesatz';
    font-size: 14px;
    color: rgba(0,0,0,0.3);
}
a { color: #d79800; text-decoration: none; }
a:hover { color: #bf4c24; }

/* --- Shadow Styles --- */
.box{
    position:relative;
    background:#f1f1f1;
    margin:0 10px;
}

.box:before, .box:after{
    position:absolute;
    z-index:-1;
    content:"";
}

.one, .two, .three, .four, .five, .six, .seven {
    margin: 40px auto;
    width: 200px;
    height: 125px;
    border: 1px #888 solid;
}
.one { margin-top: 6px; }

.one:after{
    top:50%;
    bottom:5px;
    width:90%;
    left:5%;
    border-radius:100%/20%;
    -moz-border-radius:100%/20%;
    -webkit-border-radius:100%/20%;
    box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.3);
}

.two:after{
    bottom:50%;
    top:5px;
    width:90%;
    left:5%;
    border-radius:100%/20%;
    -moz-border-radius:100%/20%;
    -webkit-border-radius:100%/20%;
    box-shadow:0 -15px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 -15px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:0 -15px 7px rgba(0,0,0, 0.3);
}

.three:before,
.three:after{
    top:0;
    width:100%;
    height: 100%;
    border-radius:20%/100%;
    -moz-border-radius:20%/100%;
    -webkit-border-radius:20%/100%;
    box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:-10px 0 7px rgba(0,0,0, 0.3);
}
.three:before{
    box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:10px 0 7px rgba(0,0,0, 0.3);
}

.four:before,
.four:after{
    top:50%;
    bottom:5px;
    width:90%;
   ...