ICI header("Location: http://www.mytesting.fr ");

METTRE UNE OMBRE SOUS UN TEXTE.

par André Marini 19 Février 2015, 20:16 Texte

METTRE UNE OMBRE SOUS UN TEXTE.

On peut "ombrer" un texte pour faire un effet de titre.

 

La formule est très simple puisqu'il s'agit simplement d'indiquer le nom de la couleur en anglais et d'utilisez le paramètre "text-shadow".

 

Voici quatre exemples avec des couleurs différentes. 

 

CODE

 

<p><label style="font-size:18px; text-shadow: yellow 0px 10px 10px;">Titre d'article avec ombre jaune</label></p>

<p><label style="font-size:18px; text-shadow: red 0px 10px 10px;">Titre d'article avec ombre rouge</label></p>

<p><label style="font-size:18px; text-shadow: black 0px 10px 10px;">Titre d'article avec ombre noire</label></p>

<p><label style="font-size:18px; text-shadow: green 0px 10px 10px;">titre d'article avec ombre verte</label></p>

 

RESULTAT

 

 

 

Après la couleur, on trouve 3 valeurs px; qui ont leur utilité.

 

1) Passons de 0 à 20 pour la première valeur. L'ombre se décale vers la droite.

 

<p><label style="font-size:18px; text-shadow: yellow 20px 10px 10px;">Titre d'article avec ombre jaune</label></p> 

2) Passons de 10 à 30 px; pour la deuxième valeur. L'ombre se décale vers le bas.

 

<p><label style="font-size:18px; text-shadow: yellow 0px 30px 10px;">Titre d'article avec ombre jaune</label></p>

 

 

 

 

 

3) Passons de 10 à 20 pour la troisième valeur. La hauteur de l'ombre augmente et se dilue. 

 

<p><label style="font-size:18px; text-shadow: yellow 0px 10px 20px;">Titre d'article avec ombre jaune</label></p>

 

 

4) EFFET DE TITRE

 

Pour faire un effet sur un titre qui sera de plus grosse taille, il suffit de changer la taille de la police "font-size" en le mettant par exemple à 40px;

 

 

5) CHANGER LA COULEUR DE LA POLICE DE BASE

 

On peut aussi changer la couleur de la police de base.

En effet si "font size" indique la taille et la couleur du fond, donc de l'ombre, "span style" indique la couleur de la police de base.

 

<p><label style="font-size:40px; text-shadow: red 0px 10px 10px;"><span style="color:#FF0000;">TITRE D&#39;ARTICLE EN ROUGE</span></label></span></p>
 

 

commentaires

Haut de page