Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Couleurs et transparence

RDFFav

CSS3 - Transparence, opacité et couleurs RGB

Quel plaisir de vous parler de transparence CSS, à toutes fins pratiques inexistante avant le CSS2, à quelques exceptions près.RGB, opacité, transparence, alpha channel

Palais des congrès de Montréal
Palais des congrès de Montréal

Quel plaisir de vous parler de transparence CSS, à toutes fins pratiques inexistante avant le CSS2, à quelques exceptions près. En utilisant la transparence du format GIF, une image indexée (et pixelisé!) où par exemple un pixel sur deux était vide, laissant entrevoir l’image d’en dessous. Un résultat plus ou moins probant en ce qui me concerne. Un autre technique enseigné à l’époque avec un GIF découpée consistait cette fois à ajouter un légé rappelle du fond sur l’image, quelques pixels en guise de pourtour. Il y avait aussi la gamme des filtres Internet Explorer 4! à l’origine de la mauvaise réputation du navigateur de Microsoft.

Outre le format d’image PNG et son support de « l’alpha channel » il y a depuis 3 méthodes pour jouer avec la transparence en CSS :

Histoire

/* IE 4.0 */ filter:progid:DXImageTransform.Microsoft.Alpha /* IE 8 - 9 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5.5 - 7 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";} /* Et finalement, plus simple et compatible */ /* ... IE 8, 9, 5, 6, 7! */ filter: alpha(opacity=50); Ou encore les transitions : filter:progid:DXImageTransform.Microsoft.Fade()

Bueark! « DXImageTransform ». En plus IE en arrachait, des difficultés au niveau de l’anti-alias et du texte qui en décourageait plus d’un. On y arrivait tout de même. Une autre bonne raison de passer à j’uery, à l’époque. Car n’empêche, Microsoft est en quelque sortes précurseures d’une technique aujourd’hui entièrement intégrées au CSS3! La bête noire du design n’a aujourd’hui plus de limite. Déjà Microsoft a simplifié son filtre par filter: alpha(opacity: 40); comme si la transparence avant plus d’un format! Enfin, déjà disponible avec le CSS2 et en plus simple opacity: 0.40 pour les navigateurs dit moderne. On parle essentiellement d’un élément transparent, c’est-à-dire que l’ensemble du contenu de l’élément sera transparent. Le texte, comme la couleur de fond. On s’en sert d’ailleurs pour cacher carrément un élément 0 ou 1. Note : Pour supporter les vieilles versions Ie, on force un zoom: 1 ou un width: 100%;.

Attribut « opacity »

.transparance { background:transparent; -moz-opacity:0.40; /* Mozilla, vieux Firefox 0.9- Netscape ... */ -khtml-opacity: 0.5; /* Safari 1.x */ filter:alpha(opacity: 40); /* IE 5, 6, 7, 8, 9! */ opacity:0.40; zoom: 1; }

Exemple simple de la W3C avec une image réactive et le sélecteur hover.

img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Fond transparent et non le texte

Et donc pour avoir un texte à 100% sur un fond transparent à 50% il fallait deux DIV. Un pour le fond, un pour le texte! Exemple :

<html>
  <head>
    <style>
      div.cFond {
        background: #58585a url("http://neural.quebec/p_hiver5.jpg");
        padding:20px;
      }
      div.cTexte {
        background-color: #ffffff;
        padding:20px;
        width:200px
        height:100px;
        opacity: 0.6;
        filter: alpha(opacity=60);
        zoom: 1;
      }
      div.cTexte p {
        font-weight: bold;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <div class="cFond">
      <div class="cTexte">
        <p>Texte...</p>
      </div>
    </div>
  </body>
</html>
Résultat à 20%
Déclaration universelle des droits de l’homme

Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde.


Bon exemple

Le secret est d’avoir un DIV avec une position « absolute » sous le contenu avec un z0index supérieur au fond mais inférieur au texte.

<style>
.cTexteConteneur {
  position:relative;
  background: #58585a url("http://neural.quebec/p_hiver5.jpg");
  height:140px;
}
.cTexte2 {
  position:relative;
  z-index:5;
}
.cTexte2 h5 {
  padding-top:40px;
  margin-left:20px;
}
.cTexte2 p {
  margin-left:20px;
}
.cFondTransparent {
  position:absolute;
  top:20px;
  left:20px;
  bottom:20px;
  right:20px;
  background-color:#ffffff;
  z-index:3;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  opacity:.2;
  /* Petit truc pour ;a hauteur et la position:absolute; */
  overflow:show;
}
</style>

<div class="cTexteConteneur">
  <div class="cTexte2">

    <p>Texte</p><br />
  </div>
  <div class="cFondTransparent"></div>
</div>
Résultat à 20% et texte à 100%
Déclaration universelle des droits de l’homme

Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde.


La transparence a aussi d’autres aspects, utilisés ici en transition.

.transition { opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; }

Couleurs et transparence RGBs

Mais rien ne bat le support RGBa du CSS3! Évidemment en RGB (voir le Convertisseur Hexadécimal (HEX) / Décimal (RGB)). On parle ici d’une véritable couleur de fond, rien à voit avec l’opacité. Une fois notre couleur en RGB, les trois premiers nombres, il suffit de jouer avec le dernier nombre, de 0.01 à 1.00. Ici un noir à 50 % par exemple : rgba(0, 0, 0, 0.5);

/* Safari 3.x Mozilla Firefox 3.x Google Chrome (toutes les version) Mobile Safari (iPhone / iPod / iPad) Opera 10.x Internet Explorer 9 Preview */ .transparance { background: rgb(0, 0, 0); /* Pour navigateur incompatible */ background: rgba(0, 0, 0, 0.5); } /*Pour les vieux IE */ .transparanceIE { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); zoom: 1; }

Graphique vectoriel adaptable (SVG)

Le Graphique vectoriel adaptable (SVG) permets aussi de manipuler la transparence avec l’attribut fill-opacity. Plus qu’une image, la programmation SVG permet de créer des fonds dynamiques en quelques lignes de code.

<svg height="100" width="100"> <ellipse cx="95" cy="61" rx="60" ry="30" fill="#666" fill="#c6c3bd" fill-opacity="0.5" /> </svg>

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    8/10 sur 1 revues.
           Visites : 11113 - Pages vues : 11352
    X

    Trucsweb.com Connexion

    X

    Trucsweb.com Mot de passe perdu

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte