Vous manipulez le langage CSS au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous. Dossier Rubrique Client Web Participez
Positionnement et transparence multinavigateur sans PNG ni GIF
Eric Thouvenin, Bordeaux
Un premier rendu réussi. Photo déposée par Eric Thouvenin
Quel est en 3 lignes l'objectif de votre astuce ?
Pouvoir rendre un contenu transparent sans avoir recours aux activeX ni Java ni Gif (référence à Internet Explorer)
On peut ainsi placer une information non perturbante en surimpression d'un texte et/ou de tout élément.
Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.
Il faut commencer par avoir le code HTML adéquat :
- un bloc standard
- le bloc qui viendra au dessus et qui sera transparent
- un bloc de contenu en surimpression
Bloc placé au dessus
Texte placé en dessous
Et la CSS adaptée :
/* bloc inférieur */
#container {
background-color:#003399;
color:#FFFFFF;
width:300px;
height:200px;
}
/* bloc supérieur */
#transparent {
/* postionement */
position:absolute;
margin-top:50px;
margin-left:75px;
/* le z-index doit être supérieur à celui du conteneur (défaut:0) */
z-index:10;
/* on définit la couleur de fond, ici un blanc ... transparent à 85% */
background-color:#FFFFFF;
/* transparence IE : 0->100 */ filter:alpha(opacity=85);
/* transparence Gecko/Mozilla : 0->1 */
-moz-opacity:.85;
/* transparence générale : 0->1 */
opacity:.85;
/* puis une petite mise en forme */
width:150px;
border:1px solid #000;
padding:5px;
color:#000000;
}
/* si on s'arrête ici, tout le contenu du bloc 'transparent' sera réellement transparent
donc on va définir une transparence nulle pour le contenu du bloc supérieur */
#transparent p {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
Et voila, vous devriez obtenir quelque chose de similaire à l'image que j'ai jointe.
Exemples d'applications type :
- Messages d'infos lors du clic
- Assistance dans un formulaire lors du Focus
- "Infobulles" d'aide
- Infos sur une image (simili WaterMark en html)
- Définition de mots
- Publicités non invasives
- Affichage d'éléments non nécessaires lors du chargement de page
- etc...
A noter que ces blocs transparents n'ont pas d'intérêt à être affichés en permanence et que donc un peu de code JavaScript pour les afficher/masquer sera le bienvenu. Ce qui vous permettra, sans forcément passer par le xmlHttpRequest de dynamiser un peu l'expérience utilisateur...
Positionnement et transparence multinavigateur sans PNG ni GIF 
