snipt

Ctrl+h for KB shortcuts

CSS

rgba colors in IE 7 & IE 8

1
2
3
/* found here : http://stackoverflow.com/a/3977240 */
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE shit */
https://snipt.net/embed/6e770b31dd7181a60ba2d17f316037ac/
/raw/6e770b31dd7181a60ba2d17f316037ac/
6e770b31dd7181a60ba2d17f316037ac
css
CSS
3
2019-06-21T15:17:21
True
False
False
/api/public/snipt/43498/
rgba-colors-in-ie-7-ie-8
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">/* found here : http://stackoverflow.com/a/3977240 */</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">background</span><span class="o">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">255</span><span class="o">,</span> <span class="nt">255</span><span class="o">,</span> <span class="nt">255</span><span class="o">,</span> <span class="nt">0</span><span class="nc">.3</span><span class="o">);</span> <span class="c">/* browsers */</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">filter</span><span class="o">:</span> <span class="nt">progid</span><span class="nd">:DXImageTransform</span><span class="nc">.Microsoft.gradient</span><span class="o">(</span><span class="nt">GradientType</span><span class="o">=</span><span class="nt">0</span><span class="o">,</span><span class="nt">startColorstr</span><span class="o">=</span><span class="s1">&#39;#4cffffff&#39;</span><span class="o">,</span> <span class="nt">endColorstr</span><span class="o">=</span><span class="s1">&#39;#4cffffff&#39;</span><span class="o">);</span> <span class="c">/* IE shit */</span> </span></pre></div> </td></tr></table>
"internet explorer", color, css, hack, ie7, ie8, rgba

CSS

IE RGBa transparent color

1
2
3
4
5
div{
background-color: transparent;
background-color: rgba(255, 255, 255,0.8);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}
https://snipt.net/embed/f1b55c3f4c8942c686a77e03b3b427e4/
/raw/f1b55c3f4c8942c686a77e03b3b427e4/
f1b55c3f4c8942c686a77e03b3b427e4
css
CSS
5
2019-06-25T13:28:10
True
False
False
/api/public/snipt/34581/
ie-rgba-transparent-color
<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="nt">div</span><span class="p">{</span> </span><span id="L-2"><a name="L-2"></a><span class="nb">background-color</span><span class="o">:</span> <span class="nb">transparent</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nb">background-color</span><span class="o">:</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">8</span><span class="p">);</span> <span class="n">filter</span><span class="o">:</span><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">gradient</span><span class="p">(</span><span class="n">startColorstr</span><span class="o">=</span><span class="m">#80ffff</span><span class="n">ff</span><span class="o">,</span><span class="n">endColorstr</span><span class="o">=</span><span class="m">#80ffff</span><span class="n">ff</span><span class="p">);</span> </span><span id="L-4"><a name="L-4"></a><span class="o">-</span><span class="n">ms</span><span class="o">-</span><span class="n">filter</span><span class="o">:</span> <span class="s2">&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)&quot;</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>
color, ie, rgba, transparent

CSS

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

1
2
3
p {
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}
https://snipt.net/embed/a4b11823c9eb09f28652878386d6c8e4/
/raw/a4b11823c9eb09f28652878386d6c8e4/
a4b11823c9eb09f28652878386d6c8e4
css
CSS
3
2019-06-25T14:19:32
True
False
False
/api/public/snipt/17807/
all-browsers-that-support-the-css-text-shadow-and-box-shadow-properties-also-support-the-new-css3-rgba-syntax
<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></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="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">text-shadow</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">2</span><span class="p">)</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, css3, rgba, text-shadow

CSS

CSS - CSS3 rgba color transparency

1
2
3
4
5
/* Color RGB y debajo la transparencia, mientras mas pequeño mas transparente */
div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}
https://snipt.net/embed/bb6034494a98c65c4f8dbf175d3e68ab/
/raw/bb6034494a98c65c4f8dbf175d3e68ab/
bb6034494a98c65c4f8dbf175d3e68ab
css
CSS
5
2019-06-20T22:37:51
True
False
False
/api/public/snipt/17027/
css-css3-rgba-color-transparency
<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="c">/* Color RGB y debajo la transparencia, mientras mas pequeño mas transparente */</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">div</span> <span class="p">{</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">background</span><span class="o">:</span> <span class="nb">rgb</span><span class="p">(</span><span class="m">200</span><span class="o">,</span> <span class="m">54</span><span class="o">,</span> <span class="m">54</span><span class="p">);</span> <span class="c">/* The Fallback */</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">background</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">200</span><span class="o">,</span> <span class="m">54</span><span class="o">,</span> <span class="m">54</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="p">}</span> </span></pre></div> </td></tr></table>
css, css3, rgba

CSS+PHP

CSS 3 background transparency with rgba colors

1
2
3
background: rgba(255, 0, 0, 0.2);

/* red background with 20% of opacity, near to 0 is more opaque, near to 1 is more "colored" */
https://snipt.net/embed/5c3fb7bacb5ad85e1b542302d5ff6ab9/
/raw/5c3fb7bacb5ad85e1b542302d5ff6ab9/
5c3fb7bacb5ad85e1b542302d5ff6ab9
css+php
CSS+PHP
3
2019-06-23T06:01:36
True
False
False
/api/public/snipt/16575/
css-3-background-transparency-with-rgba-colors
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">background</span><span class="o">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">255</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="nc">.2</span><span class="o">);</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="c">/* red background with 20% of opacity, near to 0 is more opaque, near to 1 is more &quot;colored&quot; */</span> </span></pre></div> </td></tr></table>
background, css3, rgba, transparency