forked from addyosmani/backbonejs-gallery
-
Notifications
You must be signed in to change notification settings - Fork 0
/
shadows.css
83 lines (74 loc) · 2.71 KB
/
shadows.css
1
/* CSS-only drop-shadow variations based on work by Nicolas Gallagher*/ .drop-shadow { position:relative; padding:1em; margin:2em 0.5em 5em; 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; bottom:15px; left:10px; width:50%; height:20%; } .drop-shadow:hover{ background:#f3f3f3; } .drop-shadow:after{ right:10px; left:auto; } .round { -moz-border-radius:4px; border-radius:4px; } .round:before, .round:after { 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); } .round:after { -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } .curls { border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; } .curls:before, .curls:after { bottom:12px; max-width:200px; height:55%; -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -webkit-transform:skew(-8deg) rotate(-4deg); -moz-transform:skew(-8deg) rotate(-4deg); -o-transform:skew(-8deg) rotate(-4deg); transform:skew(-8deg) rotate(-4deg); } .curls:after { -webkit-transform:skew(8deg) rotate(4deg); -moz-transform:skew(8deg) rotate(4deg); -o-transform:skew(8deg) rotate(4deg); transform:skew(8deg) rotate(4deg); }