snipt

Ctrl+h for KB shortcuts

CSS

CSS Opacity

1
2
3
4
5
6
7
/* Balise opacity http://goo.gl/s9akSF */

.balise_perso {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50); /* IE 4/5/6/7 */
  opacity: 0.5; /* IE 9 et navigateurs récents */
}
https://snipt.net/embed/1ca7133b94b3954f2056a139444acc08/
https://snipt.net/raw/1ca7133b94b3954f2056a139444acc08/
1ca7133b94b3954f2056a139444acc08
css
CSS
7
2016-09-26T16:10:55
True
False
False
Feb 09, 2014 at 12:39 AM
/api/public/snipt/112054/
css-opacity-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 id="L-1"><a name="L-1"></a><span class="c">/* Balise opacity http://goo.gl/s9akSF */</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="nc">.balise_perso</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.Alpha(Opacity=50)&quot;</span><span class="p">;</span> <span class="c">/* IE 8 */</span> </span><span id="L-5"><a name="L-5"></a> <span class="n">filter</span><span class="o">:</span> <span class="n">alpha</span><span class="p">(</span><span class="k">opacity</span><span class="o">=</span><span class="m">50</span><span class="p">);</span> <span class="c">/* IE 4/5/6/7 */</span> </span><span id="L-6"><a name="L-6"></a> <span class="k">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 class="c">/* IE 9 et navigateurs récents */</span> </span><span id="L-7"><a name="L-7"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, opacity

CSS

CSS Opacity to all browser

1
2
3
4
5
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
https://snipt.net/embed/af1920c0caf96d338258403770574c77/
https://snipt.net/raw/af1920c0caf96d338258403770574c77/
af1920c0caf96d338258403770574c77
css
CSS
5
2016-09-26T01:59:44
True
False
False
Nov 25, 2013 at 06:31 PM
/api/public/snipt/96701/
css-opacity-to-all-browser
<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">-ms-filter</span><span class="o">:</span><span class="s2">&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;</span><span class="o">;</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">filter</span><span class="o">:</span> <span class="nt">alpha</span><span class="o">(</span><span class="nt">opacity</span><span class="o">=</span><span class="nt">100</span><span class="o">);</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">-moz-opacity</span><span class="nd">:1</span><span class="o">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">-khtml-opacity</span><span class="o">:</span> <span class="nt">1</span><span class="o">;</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">opacity</span><span class="o">:</span> <span class="nt">1</span><span class="o">;</span> </span></pre></div> </td></tr></table>
"all browsers", css, opacity

CSS

change image opacity on hover

1
2
3
4
5
6
#some-div-name img:hover {
        /* for Chrome, Firefox, & Safari */
	opacity: 0.8;
        /* for IE */
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
https://snipt.net/embed/120c2e856b95ffd8e0b1863c0d112bbf/
https://snipt.net/raw/120c2e856b95ffd8e0b1863c0d112bbf/
120c2e856b95ffd8e0b1863c0d112bbf
css
CSS
6
2016-09-27T00:37:25
True
False
False
/api/public/snipt/29285/
change-image-opacity-on-hover
<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 id="L-1"><a name="L-1"></a><span class="nf">#some-div-name</span> <span class="nt">img</span><span class="nd">:hover</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="c">/* for Chrome, Firefox, &amp; Safari */</span> </span><span id="L-3"><a name="L-3"></a> <span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">8</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="c">/* for IE */</span> </span><span id="L-5"><a name="L-5"></a> <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">Alpha</span><span class="p">(</span><span class="k">opacity</span><span class="o">=</span><span class="m">80</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>
css, hover, image, img, opacity

CSS

Cross Browser Opacity

1
2
3
4
5
6
opacity:.50;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
https://snipt.net/embed/d873a79db128ae976a18fcacb4c1f76a/
https://snipt.net/raw/d873a79db128ae976a18fcacb4c1f76a/
d873a79db128ae976a18fcacb4c1f76a
css
CSS
6
2016-09-10T10:03:04
True
False
False
/api/public/snipt/24453/
cross-browser-opacity-6
<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 id="L-1"><a name="L-1"></a><span class="nt">opacity</span><span class="o">:</span><span class="nc">.50</span><span class="o">;</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">-moz-opacity</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.5</span><span class="o">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">-khtml-opacity</span><span class="o">:</span> <span class="nt">0</span><span class="nc">.5</span><span class="o">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">-ms-filter</span><span class="o">:</span> <span class="s2">&quot;alpha(opacity=50)&quot;</span><span class="o">;</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">filter</span><span class="o">:</span> <span class="nt">alpha</span><span class="o">(</span><span class="nt">opacity</span><span class="o">=</span><span class="nt">50</span><span class="o">);</span> </span><span id="L-6"><a name="L-6"></a><span class="nt">filter</span><span class="o">:</span> <span class="s2">&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;</span><span class="o">;</span> </span></pre></div> </td></tr></table>
css, css3, opacity

CSS

crossbrowser opacity

1
2
3
4
5
.opaque {
   opacity: .5;	
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
}
https://snipt.net/embed/edab0c732f57879f42856a2e6ebfd3a2/
https://snipt.net/raw/edab0c732f57879f42856a2e6ebfd3a2/
edab0c732f57879f42856a2e6ebfd3a2
css
CSS
5
2016-09-22T19:39:52
True
False
False
/api/public/snipt/23497/
crossbrowser-opacity
<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">.opaque</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="k">opacity</span><span class="o">:</span> <span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></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.Alpha(Opacity=50)&quot;</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="n">filter</span><span class="o">:</span> <span class="n">alpha</span><span class="p">(</span><span class="k">opacity</span><span class="o">=</span><span class="m">50</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>
opacity

CSS

opacity

1
2
3
Opacity
  color: rgba(255, 0, 0, 1.00); 
  background: rgba(0, 0, 255, 1.00);
https://snipt.net/embed/8744fa7e5ac73489170d4b7ce665c320/
https://snipt.net/raw/8744fa7e5ac73489170d4b7ce665c320/
8744fa7e5ac73489170d4b7ce665c320
css
CSS
3
2016-09-19T07:32:36
True
False
False
/api/public/snipt/17773/
opacity-4
<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 id="L-1"><a name="L-1"></a><span class="nt">Opacity</span> </span><span id="L-2"><a name="L-2"></a> <span class="nt">color</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">1</span><span class="nc">.00</span><span class="o">);</span> </span><span id="L-3"><a name="L-3"></a> <span class="nt">background</span><span class="o">:</span> <span class="nt">rgba</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">255</span><span class="o">,</span> <span class="nt">1</span><span class="nc">.00</span><span class="o">);</span> </span></pre></div> </td></tr></table>
css, opacity
Copyrighted, illegal, or inappropriate content? Email support@snipt.net.