Journal du Net > Développeurs > Contributions > Votre astuce CSS ?
Contribution précédente Contribution suivante

APPEL
A CONTRIBUTION

Vous manipulez le langage CSS au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous.
Participez
 Positionnement et transparence multinavigateur sans PNG ni GIF  
Eric Thouvenin , Bordeaux
Positionnement et transparence multinavigateur sans PNG ni GIF
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...

Publié le 13 septembre 2007

Soyez le premier ou la première à réagir à ce temoignage : réagir
Contribution précédente Contribution suivante
12 contributions : 1 2 3 4 5 6 7 8 9 10 11 12
 




 

© Benchmark Group, 69-71 avenue Pierre Grenier 92517 BOULOGNE BILLANCOURT Cedex

RECHERCHER