Mastering CSS3 Box-Shadow
Mastering CSS3 Box-Shadow
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
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; }
<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>
#1 for location developers in quality, price and choice, switch to HERE.
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 }}