02 Feb, 2009

CSS opacity

Categoriën: Bug | CSS3 | FireFox | Non Valid | hack | safari

Crossbrowser opacity, het is mogelijk, maar momenteel moeten we nog steeds elke browser apart aanspreken.

HTML

<div class="my-opacity">
 <p>Pellentesque habitant morbi tristique senectus et netus et </p>
</div>

CSS

.my-opacity {
    border: 1px solid #000;
    margin: 0 auto;
}
.my-opacity p {
    filter:alpha(opacity=30); /* msie */
    -moz-opacity: 0.30; /* firefox 1.0 */
    -khtml-opacity: 0.30; /* webkit */
    opacity: 0.30; /* css 3 */
    background-color: #000;
    color: #fff;
    margin: 0;
    zoom: 1;/* for msie */
    padding: 10px;
}

Gerelateerde Snippets

2 Reakties op "CSS opacity"

Css Snippets » CSS opacity voor IE6-7 & IE8

May 21st, 2009 at 13:22

1

[...] info over opacity voor ander browser kan je in deze CSS Snippet vinden. Tags: IE6, IE7, IE8, ms-filter, opacity, [...]

deef

July 28th, 2009 at 13:30

2

Om helemaal correct te zijn kan de property met de -ms- prefix toegevoegd worden (in combinatie met de dubbele quotes):

-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0.50)”;

zie ook http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

Reaktie formulier


Demo: CSS opacity:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.