<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>純CSS3實現的各類陰影效果</title> <style> body { padding: 20px 0 0; font: 14px/1.5 Arial, sans-serif; text-align: center; color: #333; background: #FAF0D9; } a { font-weight: bold; color: #346AA8; } a: hover, a: focus, a: active { text-decoration: none; } .container { position: relative; z-index: 1; width: 600px; padding: 20px; margin: 0 auto; background: #FAF0D9; } .container: after { content: ""; display: block; clear: both; visibility: hidden; height: 0; font-size: 0; } /* Shared styles*/ .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); } /* Curled corners*/ .curled { 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; } .curled: before, .curled: after { bottom: 12px; left: 10px; height: 55%; max-width: 200px; -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); } .curled: after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(4deg); -moz-transform: skew(8deg) rotate(4deg); -o-transform: skew(8deg) rotate(4deg); transform: skew(8deg) rotate(4deg); } /* Perspective*/ .perspective: before { left: 80px; bottom: 8px; width: 50%; height: 35%; max-width: 200px; -webkit-box-shadow: -80px 5px 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4); box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4); -webkit-transform: skew(50deg); -moz-transform: skew(50deg); -o-transform: skew(50deg); transform: skew(50deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .perspective: after { display: none; } /* Raised shadow - no pseudo-elements needed*/ .raised { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /* Curved shadows*/ .curved: before { top: 10px; bottom: 10px; left: 0; right: 50%; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6); box-shadow: 0 0 15px rgba(0,0,0,0.6); -moz-border-radius: 10px / 100px; border-radius: 10px / 100px; } .curved-vt-2: before { right: 0; } .curved-hz-1: before { top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .curved-hz-2: before { top: 0; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } /* Rotated box*/ .rotated { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .rotated : first-child: before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; 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; } </style> <script> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div class="container"> <h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1> <div class="drop-shadow lifted"> <p>Lifted corners</p> </div> <div class="drop-shadow curled"> <p>Curled corners</p> </div> <div class="drop-shadow perspective"> <p>Perspective</p> </div> <div class="drop-shadow raised"> <p>Raised box</p> </div> <div class="drop-shadow curved curved-vt-1"> <p>Single vertical curve</p> </div> <div class="drop-shadow curved curved-vt-2"> <p>Vertical curves</p> </div> <div class="drop-shadow curved curved-hz-1"> <p>Single hozitonal curve</p> </div> <div class="drop-shadow curved curved-hz-2"> <p>Horizontal curves</p> </div> <div class="drop-shadow lifted rotated"> <p>Rotated box</p> </div> </div> </body> </html>