<div id="shadow_demo" class="clearfix">
<div class="example">
<div class="box">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 0 10px #555</span></pre></p>
</div>
</div>
<div class="example">
<div class="box spread">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 0 10px <em class="spread">10px</em> #555</span></pre></p>
</div>
</div>
<div class="example last">
<div class="box spread_neg"><p><pre><span class="property">box-shadow</span>: <span class="value">0 0 10px <em class="spread">-10px</em> #555</span></pre></p>
</div>
</div>
</div>
<div id="shadow_demo2" class="clearfix">
<div class="example">
<div class="box">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 10px 10px #555</span></pre></p>
</div>
</div>
<div class="example">
<div class="box spread">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 10px 10px <em class="spread">-10px</em> #555</span></pre></p>
</div>
</div>
<div class="example last">
<div class="box inset">
<p><pre><span class="property">box-shadow</span>: <span class="value">inset 0 -10px 10px <em class="spread">-10px</em> #555</span></pre></p>
</div>
</div>
</div>
<div id="shadow_inner" class="clearfix">
<div class="example">
<div class="box inset">
<p><pre><span class="property">box-shadow</span>: <span class="value">inset 0 0 10px #555</span></pre></p>
</div>
</div>
<div class="example">
<div class="box spead inset">
<p><pre><span class="property">box-shadow</span>: <span class="value">inset 0 0 10px <em class="spread">-10px</em> #555</span></pre></p>
</div>
</div>
<div class="example last">
<div class="box four">
<p><pre><span class="property">box-shadow</span>: <span class="value">inset 0 -20px 10px <em class="spread">-4px</em> #555,<br/>inset -20px 0px 10px <em class="spread">-8px</em> #555,<br/>inset 0 20px 10px <em class="spread">-16px</em> #555,<br/>inset 20px 0px 10px <em class="spread">-16px</em> #555</span></pre></p>
</div>
</div>
</div>
<div id="shadow_extreme" class="clearfix">
<div class="example">
<div class="box floating">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 5px 10px <em class="spread">20px</em> #fff,<br/>0 20px 20px <em class="spread">10px</em> #aaa</span></pre></p>
<p><pre><strong>:hover</strong><br/><span class="property">box-shadow</span>: <span class="value">0 -15px 5px <em class="spread">15px</em> #fff,<br/>0 -4px 10px <em class="spread">5px</em> #555</p>
</div>
</div>
<div class="example">
<div class="box bigshadow">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 0 100px <em class="spread">-30px</em> #555</span></pre></p>
</div>
</div>
<div class="example last">
<div class="box rainbow">
<p><pre><span class="property">box-shadow</span>: <span class="value">0 0 1px <em class="spread">2px</em> purple,<br/>0 0 1px <em class="spread">4px</em> blue,<br/>0 0 1px <em class="spread">6px</em> green,<br/>0 0 1px <em class="spread">8px</em> yellow,<br/>0 0 1px <em class="spread">10px</em> orange,<br/>0 0 1px <em class="spread">12px</em> red;</span></pre></p>
</div>
</div>
</div>
body {
width: 900px;
margin: 0 auto;
}
.example {
float: left;
margin: 10px 60px 60px 0;
}
.example.last {
margin-right: 0px;
}
.example .legend {
margin-top: 10px;
}
.box {
width: 220px;
padding: 15px;
background: #ddd;
border-radius: 5px;
height: 150px;
text-align: center;
}
#shadow_demo .box {
-webkit-box-shadow: 0 0 10px #555;
-moz-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px #555;
}
#shadow_demo .box.spread {
-webkit-box-shadow: 0 0 10px 10px #555;
-moz-box-shadow: 0 0 10px 10px #555;
box-shadow: 0 0 10px 10px #555;
}
#shadow_demo .box.spread_neg {
-webkit-box-shadow: 0 0 10px -10px #555;
-moz-box-shadow: 0 0 10px -10px #555;
box-shadow: 0 0 10px -10px #555;
}
#shadow_demo2 .box {
-webkit-box-shadow: 0 10px 10px #555;
-moz-box-shadow: 0 10px 10px #555;
box-shadow: 0 10px 10px #555;
}
#shadow_demo2 .box.spread {
-webkit-box-shadow: 0 10px 10px -10px #555;
-moz-box-shadow: 0 10px 10px -10px #555;
box-shadow: 0 10px 10px -10px #555;
}
#shadow_demo2 .box.inset {
-webkit-box-shadow: inset 0 -10px 10px -10px #555;
-moz-box-shadow: inset 0 -10px 10px -10px #555;
box-shadow: inset 0 -10px 10px -10px #555;
}
#shadow_inner .box.inset {
-webkit-box-shadow: inset 0px 0px 10px #555;
-moz-box-shadow: inset 0px 0px 10px #555;
box-shadow: inset 0px 0px 10px #555;
}
#shadow_inner .box.spead.inset {
-webkit-box-shadow: inset 0px 0px 10px 10px #555;
-moz-box-shadow: inset 0px 0px 10px 10px #555;
box-shadow: inset 0px 0px 10px 10px #555;
}
#shadow_inner .box.four {
-webkit-box-shadow: inset 0 -20px 10px -4px #555, inset -20px 0px 10px -8px #555, inset 0 20px 10px -16px #555, inset 20px 0px 10px -16px #555;
-moz-box-shadow: inset 0 -20px 10px -4px #555, inset -20px 0px 10px -8px #555, inset 0 20px 10px -16px #555, inset 20px 0px 10px -16px #555;
box-shadow: inset 0 -20px 10px -4px #555, inset -20px 0px 10px -8px #555, inset 0 20px 10px -16px #555, inset 20px 0px 10px -16px #555;
}
#shadow_outer {
clear: both;
}
#shadow_extreme .box.floating {
-webkit-box-shadow:0 0px 7px 30px #fff,0 20px 20px 10px #aaa;
-moz-box-shadow:0 0px 7px 30px #fff,0 20px 20px 10px #aaa;
box-shadow:0 0px 7px 30px #fff,0 20px 20px 10px #aaa;
-webkit-transition-property: all;
-webkit-transition-duration: 400ms;
-moz-transition-property: all;
-moz-transition-duration: 400ms;
}
#shadow_extreme .box.floating:hover {
background-color: #ddd;
margin-top: 70px;
-webkit-box-shadow: 0 -49px 4px 50px #fff, 0 -4px 10px 5px #555;
-moz-box-shadow: 0 -49px 4px 50px #fff, 0 -4px 10px 5px #555;
box-shadow: 0 -49px 4px 50px #fff, 0 -4px 10px 5px #555;
margin-bottom: -70px;
}
#shadow_extreme .box.bigshadow {
-webkit-box-shadow: 0 0 100px -30px #555;
-moz-box-shadow: 0 0 100px -30px #555;
box-shadow: 0 0 100px -30px #555;
}
#shadow_extreme .box.rainbow {
-webkit-box-shadow: 0 0 1px 2px purple, 0 0 1px 4px blue, 0 0 1px 6px green, 0 0 1px 8px yellow, 0 0 1px 10px orange, 0 0 1px 12px red;
-moz-box-shadow: 0 0 1px 2px purple, 0 0 1px 4px blue, 0 0 1px 6px green, 0 0 1px 8px yellow, 0 0 1px 10px orange, 0 0 1px 12px red;
box-shadow: 0 0 1px 2px purple, 0 0 1px 4px blue, 0 0 1px 6px green, 0 0 1px 8px yellow, 0 0 1px 10px orange, 0 0 1px 12px red;
}
/* ######################## SYNTAX HIGHLIGHTING ######################### */
pre {
text-align: left;
font-size: 12px;
line-height: 1.5em;
}
.legend pre {
display: inline;
}
pre .property {
color: #069;
font-weight: bold;
}
pre .value {
display: block;
color: #008200;
}
pre .spread {
color: #DC322F;
background: #fff;
padding: 0px 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: none;
font-style: normal;
}
.box:hover pre .spread {
-webkit-box-shadow: 0 0 1px 1px rgba(255,0,0,0.3);
-moz-box-shadow: 0 0 1px 1px rgba(255,0,0,0.3);
box-shadow: 0 0 1px 1px rgba(255,0,0,0.3);
}
/* ############################# THE REST ############################# */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block;}
* html .clearfix { height: 1%;}
a { color: blue; text-shadow: none }
a:hover { text-decoration: none }