Découverte du concept de photo-graphisme
Dans l’ambiance bonne enfant du Canal Saint Martin, la librairie artazart nous présentait hier les dernière compos d’Aman Iman. Cette dernière création : une suite de photographies en arc en ciel au design senti (les photos décomposant en effet la totalité du spectre visible), était agréable tant à regarder qu’a commenter, un bon moment.
Comme tout bon développeur web, je me suis attaqué à la transparence d’éléments d’une page web par l’application de styles css.
La solution est simple et trouvée depuis bon nombre d’années, elle se compose ainsi pour une opacité de 50% ou une transparence de 50%:
-moz-opacity:0.5; opacity: 0.5; filter:alpha(opacity=50);
La transparence comme d’autre propriété est héritée par les enfants qui intègrent l’élément père. Ainsi pour un bloc div, le code suivant
<div style="display: block; height: 115px;position:relative">
<img style="float:left " src="image" alt="" />
<div style="opacity: 0.5; background-color: blue; position:absolute">
<div style="opacity: 1;">
Texte
</div>
</div>
</div>donne ceci
Les div imbriquées dans l’élément portant la transparence sont elles aussi affectées par cette transparence.
L’héritage est non modifiable, et l’ajout de propriétés d’opacité aux éléments sous-jaçants ne modifie pas leurs transparence.
La solution est alors de créer deux éléments non imbriqués qui se superposent, en mettant en premier plan l’élément opaque.
Le code devient
<div style="display: block; height: 115px;">
<img style="float:left " src="image" alt="" />
<div style="position:relative">
<div style="opacity: 0.5; background-color: blue; position:absolute"></div>
<div style="position:absolute">Texte</div>
</div>
</div>Pour afficher ceci, dans lequel le texte est bien en opacité totale