snipt

Ctrl+h for KB shortcuts

CSS

CSS Box Shadows w/IE fallback

.box-shadow,.box-shadow-333 {
     box-shadow: 0 0 10px #333;
    -webkit-box-shadow: 0 5px 10px #333;
    -moz-box-shadow: 0 0 10px #333;
    filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=0,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=45,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=90,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=225,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=270,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=315,strength=5);
}

.box-shadow-999 {
     box-shadow: 0 0 10px #999;
    -webkit-box-shadow: 0 5px 10px #999;
    -moz-box-shadow: 0 0 10px #999;
    filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=0,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=45,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=90,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=180,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=225,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=270,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=315,strength=5);
}

.box-shadow-CCC {
     box-shadow: 0 0 10px #CCC;
    -webkit-box-shadow: 0 5px 10px #CCC;
    -moz-box-shadow: 0 0 10px #CCC;
    filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#d6d6d6,direction=45,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#d6d6d6,direction=135,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#d6d6d6,direction=225,strength=5)
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5)
}
https://snippets.siftie.com/embed/079f9cab9840a745474289b1e3017606/
/raw/079f9cab9840a745474289b1e3017606/
079f9cab9840a745474289b1e3017606
css
CSS
44
2019-03-25T02:10:49
True
False
False
Jul 10, 2012 at 07:39 PM
/api/public/snipt/42358/
css-box-shadows-wie-fallback
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nc">.box-shadow</span><span class="o">,</span><span class="nc">.box-shadow-333</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">#333</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">10px</span> <span class="m">#333</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">#333</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="n">filter</span><span class="o">:</span> </span><span id="L-6"><a name="L-6"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">0</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-7"><a name="L-7"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">45</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-8"><a name="L-8"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">90</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-9"><a name="L-9"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">135</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-10"><a name="L-10"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">180</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-11"><a name="L-11"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">225</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-12"><a name="L-12"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">270</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-13"><a name="L-13"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#333333</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">315</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">);</span> </span><span id="L-14"><a name="L-14"></a><span class="p">}</span> </span><span id="L-15"><a name="L-15"></a> </span><span id="L-16"><a name="L-16"></a><span class="nc">.box-shadow-999</span> <span class="p">{</span> </span><span id="L-17"><a name="L-17"></a> <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">#999</span><span class="p">;</span> </span><span id="L-18"><a name="L-18"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">10px</span> <span class="m">#999</span><span class="p">;</span> </span><span id="L-19"><a name="L-19"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">#999</span><span class="p">;</span> </span><span id="L-20"><a name="L-20"></a> <span class="n">filter</span><span class="o">:</span> </span><span id="L-21"><a name="L-21"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">0</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-22"><a name="L-22"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">45</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-23"><a name="L-23"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">90</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-24"><a name="L-24"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">135</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-25"><a name="L-25"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">180</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-26"><a name="L-26"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">225</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-27"><a name="L-27"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">270</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-28"><a name="L-28"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#999999</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">315</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">);</span> </span><span id="L-29"><a name="L-29"></a><span class="p">}</span> </span><span id="L-30"><a name="L-30"></a> </span><span id="L-31"><a name="L-31"></a><span class="nc">.box-shadow-CCC</span> <span class="p">{</span> </span><span id="L-32"><a name="L-32"></a> <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">#CCC</span><span class="p">;</span> </span><span id="L-33"><a name="L-33"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">10px</span> <span class="m">#CCC</span><span class="p">;</span> </span><span id="L-34"><a name="L-34"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">#CCC</span><span class="p">;</span> </span><span id="L-35"><a name="L-35"></a> <span class="n">filter</span><span class="o">:</span> </span><span id="L-36"><a name="L-36"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#cccccc</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">0</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-37"><a name="L-37"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#d6d6d6</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">45</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-38"><a name="L-38"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#cccccc</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">90</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-39"><a name="L-39"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#d6d6d6</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">135</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-40"><a name="L-40"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#cccccc</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">180</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-41"><a name="L-41"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#d6d6d6</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">225</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-42"><a name="L-42"></a> <span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Shadow</span><span class="p">(</span><span class="nb">color</span><span class="o">=</span><span class="m">#cccccc</span><span class="o">,</span><span class="nb">direction</span><span class="o">=</span><span class="m">270</span><span class="o">,</span><span class="n">strength</span><span class="o">=</span><span class="m">5</span><span class="p">)</span> </span><span id="L-43"><a name="L-43"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, shadows