Join the DZone community and get the full member experience.
Join For FreeBugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.
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:
Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.
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 }}