snipt

Ctrl+h for KB shortcuts

CSS

CSS Transparency Settings for All Browsers

1
2
3
4
5
6
.transparent_class {  
     filter:alpha(opacity=50);  
     -moz-opacity:0.5;  
     -khtml-opacity: 0.5;  
     opacity: 0.5;  
} 
https://snipt.net/embed/c6b1d385cdea40cb6614ca2b85cf1004/
/raw/c6b1d385cdea40cb6614ca2b85cf1004/
c6b1d385cdea40cb6614ca2b85cf1004
css
CSS
6
2019-07-08T23:49:44
True
False
False
/api/public/snipt/2239/
css-transparency-settings-for-all-browsers
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nc">.transparent_class</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="n">filter</span><span class="o">:</span><span class="n">alpha</span><span class="p">(</span><span class="nb">opacity</span><span class="o">=</span><span class="m">50</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="nb">opacity</span><span class="o">:</span><span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">-</span><span class="n">khtml</span><span class="o">-</span><span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
crossbrowser, css, png, transparency

CSS

Drop Caps

1
2
3
4
5
6
7
8
p:first-letter{  
  display:block;  
  margin:5px 0 0 5px;  
  float:left;  
  color:#FF3366;  
  font-size:60px;  
  font-family:Georgia;  
 } 
https://snipt.net/embed/6b67c193af4e5ba7b36e0dfc37f39bd3/
/raw/6b67c193af4e5ba7b36e0dfc37f39bd3/
6b67c193af4e5ba7b36e0dfc37f39bd3
css
CSS
8
2019-07-23T14:30:52
True
False
False
/api/public/snipt/2238/
drop-caps
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">p</span><span class="nd">:first-letter</span><span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">display</span><span class="o">:</span><span class="nb">block</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">margin</span><span class="o">:</span><span class="m">5px</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">float</span><span class="o">:</span><span class="nb">left</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="nb">color</span><span class="o">:</span><span class="m">#FF3366</span><span class="p">;</span> </span><span id="L-6"><a name="L-6"></a> <span class="nb">font-size</span><span class="o">:</span><span class="m">60px</span><span class="p">;</span> </span><span id="L-7"><a name="L-7"></a> <span class="nb">font-family</span><span class="o">:</span><span class="n">Georgia</span><span class="p">;</span> </span><span id="L-8"><a name="L-8"></a> <span class="p">}</span> </span></pre></div> </td></tr></table>
big, caps, css, drop, text

CSS

The order of link pseudo-classes

1
2
3
4
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
https://snipt.net/embed/76f9d53e3d73d720f3814d9d325b27e3/
/raw/76f9d53e3d73d720f3814d9d325b27e3/
76f9d53e3d73d720f3814d9d325b27e3
css
CSS
4
2019-07-17T21:00:25
True
False
False
/api/public/snipt/2232/
the-order-of-link-pseudo-classes
<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></span><span id="L-1"><a name="L-1"></a><span class="nt">a</span><span class="nd">:link</span> <span class="p">{</span><span class="nb">color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;}</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">a</span><span class="nd">:visited</span> <span class="p">{</span><span class="nb">color</span><span class="o">:</span> <span class="nb">purple</span><span class="p">;}</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span><span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;}</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">a</span><span class="nd">:active</span> <span class="p">{</span><span class="nb">color</span><span class="o">:</span> <span class="nb">yellow</span><span class="p">;}</span> </span></pre></div> </td></tr></table>
classes, css, order, pseudo

CSS

Highlight links to PDF and Word files

1
2
3
4
5
6
7
a[href$="pdf"]:after,  
a[href$="doc"]:after {  
margin:0 0 0 5px;  
font:bold 12px "Lucida Grande";  
content: " (PDF)";  
}  
a[href$=".doc"]:after {content: " (DOC)";} 
https://snipt.net/embed/3725c0c3572736f695871721d6849c74/
/raw/3725c0c3572736f695871721d6849c74/
3725c0c3572736f695871721d6849c74
css
CSS
7
2019-07-15T12:29:49
True
False
False
/api/public/snipt/2231/
highlight-links-to-pdf-and-word-files-1
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">$=</span><span class="s2">&quot;pdf&quot;</span><span class="o">]</span><span class="nd">:after</span><span class="o">,</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">$=</span><span class="s2">&quot;doc&quot;</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span> </span><span id="L-3"><a name="L-3"></a><span class="nb">margin</span><span class="o">:</span><span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nb">font</span><span class="o">:</span><span class="nb">bold</span> <span class="m">12px</span> <span class="s2">&quot;Lucida Grande&quot;</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a><span class="nb">content</span><span class="o">:</span> <span class="s2">&quot; (PDF)&quot;</span><span class="p">;</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span><span id="L-7"><a name="L-7"></a><span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">$=</span><span class="s2">&quot;.doc&quot;</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span><span class="nb">content</span><span class="o">:</span> <span class="s2">&quot; (DOC)&quot;</span><span class="p">;}</span> </span></pre></div> </td></tr></table>
css, doc, html, links, pdf

CSS

Cross Browser Minimum Height

1
2
3
4
5
#container{  
height:auto !important;/*all browsers except ie6 will respect the !important flag*/  
min-height:500px;  
height:500px;/*Should have the same value as the min height above*/  
}
https://snipt.net/embed/b2cfa34ba0be197ade529844635a3b73/
/raw/b2cfa34ba0be197ade529844635a3b73/
b2cfa34ba0be197ade529844635a3b73
css
CSS
5
2019-07-16T01:12:24
True
False
False
/api/public/snipt/2229/
cross-browser-minimum-height
<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></span><span id="L-1"><a name="L-1"></a><span class="nn">#container</span><span class="p">{</span> </span><span id="L-2"><a name="L-2"></a><span class="nb">height</span><span class="o">:</span><span class="nb">auto</span> <span class="cp">!important</span><span class="p">;</span><span class="c">/*all browsers except ie6 will respect the !important flag*/</span> </span><span id="L-3"><a name="L-3"></a><span class="nb">min-height</span><span class="o">:</span><span class="m">500px</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nb">height</span><span class="o">:</span><span class="m">500px</span><span class="p">;</span><span class="c">/*Should have the same value as the min height above*/</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
crossbrowser, css, height, min