Mastering CSS3 Box-Shadow
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