snipt

Ctrl+h for KB shortcuts

CSS

Box Sizing

1
2
3
4
5
/* The border and padding values moved inward, cutting into the width/height of the box rather than expanding it */

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
https://snipt.net/embed/cdccea4e5e2b0c39ebfa423e49c284c5/
https://snipt.net/raw/cdccea4e5e2b0c39ebfa423e49c284c5/
cdccea4e5e2b0c39ebfa423e49c284c5
css
CSS
5
2016-10-01T11:43:20
True
False
False
/api/public/snipt/116176/
box-sizing-5
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="c">/* The border and padding values moved inward, cutting into the width/height of the box rather than expanding it */</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="nt">-webkit-box-sizing</span><span class="o">:</span> <span class="nt">border-box</span><span class="o">;</span> <span class="c">/* Safari/Chrome, other WebKit */</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">-moz-box-sizing</span><span class="o">:</span> <span class="nt">border-box</span><span class="o">;</span> <span class="c">/* Firefox, other Gecko */</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">box-sizing</span><span class="o">:</span> <span class="nt">border-box</span><span class="o">;</span> <span class="c">/* Opera/IE 8+ */</span> </span></pre></div> </td></tr></table>
Css

CSS

Nth-Child Selectors

1
2
3
4
li:nth-child(odd){...}      /* applies to every odd item */
li:nth-child(even){...}     /* applies to every even item */
li:nth-child(3n+3){...}     /* applies to every 3rd item */
li:nth-child(5){...}        /* applies to the 5th item */
https://snipt.net/embed/be22557d84c2378b9faeadd0e3c69c68/
https://snipt.net/raw/be22557d84c2378b9faeadd0e3c69c68/
be22557d84c2378b9faeadd0e3c69c68
css
CSS
5
2016-09-27T14:46:25
True
False
False
Feb 10, 2014 at 06:33 AM
/api/public/snipt/112344/
nth-child-selectors
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nt">li</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">odd</span><span class="o">)</span><span class="p">{</span><span class="o">...</span><span class="p">}</span> <span class="c">/* applies to every odd item */</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">li</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">even</span><span class="o">)</span><span class="p">{</span><span class="o">...</span><span class="p">}</span> <span class="c">/* applies to every even item */</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">li</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3n</span><span class="o">+</span><span class="nt">3</span><span class="o">)</span><span class="p">{</span><span class="o">...</span><span class="p">}</span> <span class="c">/* applies to every 3rd item */</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">li</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">5</span><span class="o">)</span><span class="p">{</span><span class="o">...</span><span class="p">}</span> <span class="c">/* applies to the 5th item */</span> </span></pre></div> </td></tr></table>
Css

CSS

Text Shadow

1
2
3
4
5
h1 {
  text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); /* useing RGBA */
  text-shadow: 1px 1px 1px #000; 
  text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; /* Multiple shadows */
}
https://snipt.net/embed/64ccba027a346245d0518ce3093770a0/
https://snipt.net/raw/64ccba027a346245d0518ce3093770a0/
64ccba027a346245d0518ce3093770a0
css
CSS
5
2016-09-30T07:03:56
True
False
False
/api/public/snipt/112340/
text-shadow-10
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nt">h1</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="k">text-shadow</span><span class="o">:</span> <span class="m">0px</span> <span class="m">2px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">4</span><span class="p">);</span> <span class="c">/* useing RGBA */</span> </span><span id="L-3"><a name="L-3"></a> <span class="k">text-shadow</span><span class="o">:</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">#000</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">text-shadow</span><span class="o">:</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">#000</span><span class="o">,</span> <span class="m">3px</span> <span class="m">3px</span> <span class="m">5px</span> <span class="nb">blue</span><span class="p">;</span> <span class="c">/* Multiple shadows */</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
Css

CSS

Box Shadow

1
2
3
4
5
.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
https://snipt.net/embed/44e0aa9e7da4c8862d9c27c5fed36f40/
https://snipt.net/raw/44e0aa9e7da4c8862d9c27c5fed36f40/
44e0aa9e7da4c8862d9c27c5fed36f40
css
CSS
6
2016-09-30T14:08:16
True
False
False
Feb 10, 2014 at 06:20 AM
/api/public/snipt/112339/
box-shadow-12
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nc">.shadow</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></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">3px</span> <span class="m">3px</span> <span class="m">5px</span> <span class="m">6px</span> <span class="m">#ccc</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">3px</span> <span class="m">3px</span> <span class="m">5px</span> <span class="m">6px</span> <span class="m">#ccc</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">3px</span> <span class="m">3px</span> <span class="m">5px</span> <span class="m">6px</span> <span class="m">#ccc</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
Css
Copyrighted, illegal, or inappropriate content? Email support@snipt.net.