Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Bote outils

Bote de texte ombre

Les botes de texte ombres permettent de mettre en valeur un lment important du document de prsentation. Grce aux fonctions CSS, il est galement possible de crer de tels encadrs dans une page web.

La bote ombrage ci-dessous a t obtenue grce ces quelques lignes de code :

<DIV style="position: relative;
top: 20px;
left: 20px;
width: 360px;
height: 400px;
background:#9999CC;
</DIV>

<DIV style="position: relative;
top: -390px;
left: 12px;
width: 360px;
height: 400px;
border: solid 2pt #666699;
padding: 8 px;
font-size: 10pt;
font-family:Verdana;
background:#FFFFCC;
color:#000000">Placer ici le contenu de la bote
</DIV>

Cette mise en forme rsulte d'une astuce qui consiste crer sparment les deux lments (ombre et avant-plan) et les superposer par l'ajustement prcis des paramtres top et left.

Voici la signification de chacune des lignes du code :

 

<DIV style="position: relative;
Dbut de la bote ombre; le paramtre "position: relative" indique qu'elle s'insre juste la suite du texte prcdent. Cette premire balise <DIV> comporte les mises en forme de la zone d'ombre.
top: 20px;
Dcalage de l'ombre d'une valeur de 20 pixels vers le bas par rapport la ligne normale.
left: 20px;
Dcalage de l'ombre d'une valeur de 20 pixels vers la droite par rapport la marge de gauche.
width: 360px;
Largeur de la zone d'ombre (en mauve dans l'exemple).
height: 400px;
Hauteur de la mme zone d'ombre.
background:#9999CC;
Couleur du fond de la zone d'ombre (mauve).
</DIV>

Fin de la zone d'ombre.
<DIV style="position: relative;
Dbut de la seconde section de la bote ombre. Cette deuxime balise <DIV> comporte les mises en forme de la zone qui contiendra le texte.
top: -390px;
Dcalage vertical ngatif par rapport la section prcdente. Dans la mesure o, normalement, les deux zones devraient s'insrer l'une aprs l'autre sur la page, il faut que le dcalage de cette section couvre la hauteur de la zone prcdente, et un peu plus pour obtenir l'effet de dcalage.
left: 12px;
L aussi, le dcalage est calcul afin d'obtenir une distance de dcalage gauche identique celle du dcalage haut. L'ajustement de ce paramtre (ainsi que le prcdent) constituent la difficult principale de cet agencement; il peut tre ncessaire de modifier plusieurs fois les valeurs avant de trouver la bonne combinaison.
width: 360px;
Largeur de la zone. Identique la zone d'ombre.
height: 400px;
Hauteur de la zone. galement identique la zone d'ombre.
border: solid 2px #666699;
Paramtres de bordure de la zone qui contient le texte : solid pour une ligne pleine, 2px pour une ligne paisse de deux points et #666699 pour la couleur de la ligne.
padding: 8 px;
Distance intrieure entre les bords de l'encadr et le texte.
font-size: 10pt;
Taille de la police du texte.
font-family:Verdana;
Type de police de caractres.
background:#FFFFCC;
Couleur du fond.
color:#000000">Placer ici le contenu de la bote
Emplacement o vient prendre place le contenu.
</DIV>
Fin de la deuxime zone, et fin de l'ensemble de la bote ombre.

 

Voil ! Si ce n'est pas clair ou si vous avez besoin de prcisions, n'hsitez pas m'crire.

  
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011