Тени в третьем CSS

Posted by Pavel Podlipensky on February 06 10:20 AM
<p>-webkit-box-shadow (в последнем Webkit) и -moz-box-shadow поддерживают "внутренние" тени вместе с inset командой. Также имеется возможность указать несколько теней через зяпятую.</p><p><img src="/image.axd?picture=2010%2f2%2fScreenshot.png" alt="" /></p><p>Чтобы получить такую картинку, достаточно написать следующее:</p><div style="line-height: 12pt; background-color: #f4f4f4; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; width: 97.5%; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow-x: auto; overflow-y: auto; cursor: text; border-width: 1px; border-color: gray; border-style: solid; padding: 4px"><div style="line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px"><pre style="line-height: 12pt; background-color: white; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 1:</span> <span style="color: #0000ff">div</span><span style="color: #cc6633">.box</span> {</pre><pre style="line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 2:</span> -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12<span style="color: #006080">) 0px 0px 10px inset;</span></pre><pre style="line-height: 12pt; background-color: white; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 3:</span> -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12<span style="color: #006080">) 0px 0px 10px inset;</span></pre><pre style="line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 4:</span> -webkit-<span style="color: #0000ff">border</span>-radius: <span style="color: #006080">10px;</span></pre><pre style="line-height: 12pt; background-color: white; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 5:</span> -moz-<span style="color: #0000ff">border</span>-radius: <span style="color: #006080">10px;</span></pre><pre style="line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 6:</span> <span style="color: #0000ff">border</span>: <span style="color: #006080">1px solid #fff;</span></pre><pre style="line-height: 12pt; background-color: white; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 7:</span> <span style="color: #0000ff">padding</span>: <span style="color: #006080">6px;</span></pre><pre style="line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 8:</span> <span style="color: #0000ff">width</span>: <span style="color: #006080">200px;</span></pre><pre style="line-height: 12pt; background-color: white; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 9:</span> <span style="color: #0000ff">background</span>: <span style="color: #006080">#fff;</span></pre><pre style="line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: consolas, 'Courier New', courier, monospace; color: black; font-size: 8pt; overflow-x: visible; overflow-y: visible; border-style: none; padding: 0px; margin: 0em"><span style="color: #606060"> 10:</span> }</pre></div></div>

-webkit-box-shadow (в последнем Webkit) и -moz-box-shadow поддерживают "внутренние" тени вместе с inset командой. Также имеется возможность указать несколько теней через зяпятую.

Чтобы получить такую картинку, достаточно написать следующее:

   1: div.box {
   2:    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
   3:    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
   4:    -webkit-border-radius: 10px;
   5:    -moz-border-radius: 10px;
   6:    border: 1px solid #fff;
   7:    padding: 6px;
   8:    width: 200px;
   9:    background: #fff;
  10: }