Los efectos, son:
- lifted corners
- curled corners
- perspective
- raised box
- single vertical curve
- vertical curves
- single horizontal curve
- horizontal curves
- rotated box
HTML
<div class="drop-shadow lifted"> <p>Lifted corners</p> </div>
CSS
.drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; } .drop-shadow p { font-size:16px; font-weight:bold; } /* Lifted corners */ .lifted { -moz-border-radius:4px; border-radius:4px; } .lifted:before, .lifted:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .lifted:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
Sitio Web | Nicolas Gallagher
Vía | WebAppers