Welcome to Snipped, a code gallery for creating, saving and sharing all kinds of code snippets.

Responsive CSS Shadows

CSS · February 16, 2017 6:46 pm

0 0 88

Simple easy to use Shadows in CSS.

// HTML
<div class="box one"></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>

// CSS
.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: 400px;
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%;
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);
}
.four:before{
bottom:50%;
top:5px;
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);
}

.five:after{display:none;}
.five:before{
bottom:9px;
left:0;
width:50%;
top:80%;
max-width:300px;
-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
.five:before{left:0;}

.six:before{display:none;}
.six:after{
bottom:9px;
left:0;
width:50%;
top:80%;
max-width:300px;
-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
.six:after{
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
transform:rotate(5deg);
right:0;
left:auto;
}

.seven:before,
.seven:after{
bottom:9px;
left:0;
width:50%;
top:80%;
max-width:300px;
-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
.seven:after{
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
transform:rotate(5deg);
right:0;
left:auto;
}

Discuss this Snip
    No Discussion Comments found.

    You must be Signed In to discuss this Snip
Snipped

Snipped

Joined on
February 16, 2017

  • 9 Snips
    Contributed
  • 0 Likes
    Given
  • 0 Comments Posted
Snip Tags
Get Social And Share

Manage and share all of your code snippets in one easy place.