Mastering CSS3 Box-Shadow
by
·
Join the DZone community and get the full member experience.
Join For Free 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:
CSS
Published at DZone with permission of A. Programmer. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments