Perspective Shadow Effect using CSS3

AD

Perspective shadow is a normal shadow but tilted in one direction. This defines the light source at an angular direction hence the effect gives a 3D kind of a look.

What I did in this tutorial is I placed the shadow on the lower right side, so that means the imaginative light source (which is causing the shadow) is on the front left side of the object. Have a look. This is a pretty nifty design for adding a little spark into your objects/images.

This is a very simple tutorial and it is ideal for beginning web designers, and everyone who is just starting to learn CSS3.
If you are such a beginner, make sure you don’t miss out on this.

One more thing, just seeing the tutorial is never enough. Try it with your own hands, edit it and make it your own. That’s how you memorize codes, watching the code won’t get you anywhere, writing it will.

CSS3 Shadow

Live Demo

HTML Code

<div class="box shadow">
<div class="content"></div>
</div>

CSS Code

body, .box:after {
background:#e1e1e1;
}
.box, .content {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.box {
background: white;
position:relative;
width: 350px;
height:150px;
padding:15px;
margin: 0 auto;
margin-top: 80px;
}
.content {
background:url(images/thumb.jpg);
width:100%;
height:100%;
}
.shadow:before, .box:after {
content: '';
position: absolute;
}
.shadow:before {
background: #BEBEC0;
height: 10px;
width: 96%;
bottom: -10px;
left: 2%;
}
.shadow:after {
-moz-border-radius: 150% / 20px;
-webkit-border-radius: 150% / 20px;
border-radius: 150% / 20px;
width: 100%;
height: 20px;
bottom: -22px;
left: 0;
z-index: 1;
}

Live Demo

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved