Join the DZone community and get the full member experience.
Join For FreeAccess over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required
This post want
’s to bring up one of the great features introduced in CSS3, the box-shadow property. Now you can stop using images for displaying box-shadows, with just a few CSS lines you can create awesome effects. In this post, we will learn to add shadow effects on all four sides of a container:
The CSS3 code:
div {
border:1px solid #EEE9E9;
padding:30px;
height:50px;
width:200px;
margin:50px;
float:left;
}
.bottom{
-webkit-box-shadow:0 12px 10px -8px #00688B;
-moz-box-shadow:0 12px 10px -8px #00688B;
box-shadow:0 12px 10px -8px #00688B;
}
.top{
-webkit-box-shadow:0 -10px 15px -10px #00688B;
-moz-box-shadow:0 -10px 15px -10px #00688B;
box-shadow:0 -10px 15px -10px #00688B;
}
.inset-top-bottom{
-webkit-box-shadow:inset 0 8px 15px -8px #00688B,inset 0 -8px 15px -8px #00688B;
-moz-box-shadow:inset 0 8px 15px -8px #00688B,inset 0 -8px 15px -8px #00688B;
box-shadow:inset 0 8px 15px -8px #00688B,inset 0 -8px 15px -8px #00688B;
}
.left-right{
-webkit-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B;
-moz-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B;
box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B;
}
.left-right-bottom{
-webkit-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B,0 8px 12px -6px #00688B;
-moz-box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688B,0 8px 12px -6px #00688B;
box-shadow:10px 0 12px -8px #00688B,-10px 0 12px -8px #00688BB,0 8px 12px -6px #00688B;
}
The HTML code:
<body>
<div class="bottom">
CSS3 bottom shadow
</div>
<div class="top">
CSS3 top shadow
</div>
<div class="inset-top-bottom">
CSS3 inset top-bottom shadow
</div>
<div class="left-right">
CSS3 left-right shadow
</div>
<div class="left-right-bottom">
CSS3 left-right-bottom shadow
</div>
</body>
And the output will be:
#1 for location developers in quality, price and choice, switch to HERE.
Like This Article? Read More From DZone
Topics:
Published at DZone with permission of A. Programmer . See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}