HTML CSS examples for CSS Property:box-shadow
CSS3 "Lifted Corners" Drop-Shadow with Opacity
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .drop-shadow {<!--from ww w .j a va2 s . co m--> position:relative; float:left; width:41%; padding:2em; margin:3em 11px 5em; background:Chartreuse; -webkit-box-shadow:0 2px 5px yellow, 0 0 41px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow:0 2px 5px blue, 0 0 41px rgba(0, 0, 0, 0.2) inset; box-shadow:0 2px 5px pink, 0 0 41px rgba(0, 0, 0, 0.2) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-3; } .lifted { -moz-border-radius:5px; border-radius:5px; } .lifted:before, .lifted:after { bottom:16px; left:11px; width:51%; height:21%; max-width:301px; max-height:100px; -webkit-box-shadow:0 16px 11px OrangeRed; -moz-box-shadow:0 16px 11px grey; box-shadow:0 16px 11px BlueViolet; -webkit-transform:rotate(-4deg); -moz-transform:rotate(-4deg); -ms-transform:rotate(-4deg); -o-transform:rotate(-4deg); transform:rotate(-4deg); } .lifted:after { right:11px; left:auto; -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); -ms-transform:rotate(4deg); -o-transform:rotate(4deg); transform:rotate(4deg); } .wrapper { opacity:.6; } </style> </head> <body> <div class="wrapper"> <div class="drop-shadow lifted"> Lorem ipsum dolor sit amet, con </div> </div> <div class="drop-shadow lifted"> Lorem ipsum dolor sit amet, consec </div> </body> </html>