41Mag - Comment appliquer une ombre ou un effet d’ombrage à un titre ou un texte en CSS3

Comment appliquer une ombre ou un effet d’ombrage à un titre ou un texte en CSS3

Avec le CSS3, nous pouvons réaliser assez facilement des effets d’ombrage à nos textes ou titres. Cette propriété CSS3 est compatible avec tous les navigateurs sauf … Internet explorer !.

Nous appliquerons une ombre à nos textes ou titres en CSS3 grâce à la propriété Text-shadow.

Le résultat souhaité (si votre navigateur est compatible …)

Bienvenue sur le 41mag

L’effet d’ombrage est volontairement discret dans l’exemple ci-dessus. Faites attention quand vous utilisez cette propriété car elle peut rendre votre texte ou titre plus jolie, mais elle peut également provoquer des problèmes de lisibilités si elle est mal employée.

La propriété Text-shadow

La propriété Text-shadow permet d’appliquer un effet d’ombrage à un texte ou un titre ou de l’éclairer (voir exemple ci-dessous). Elle peut être utilisée pour imiter une ombre portée, intérieure, une lueur externe ou interne.

Tous les navigateurs supportent cette propriété sauf Internet Explorer. Internet Explorer ingérera la propriété Text-shadow et créera une solution alternative.

La syntaxe de la propriété Text-shadow

A l’instar de la propriété Box-shadow, la syntaxe de la propriété de Text-shadow est la même :

1
text-shadow : décalageDroite décalageBas diffusionOmbre couleurOmbre

La première valeur déclarée juste après la propriété Text-shadow correspond au décalage de l’ombre par la droite. Plus cette valeur sera grande, plus la distance entre le texte et l’ombre sera grand. La deuxième valeur correspond au décalage de l’ombre vers le bas. La troisième valeur correspond à la Taille de l’ombre, à sa porté, sa diffusion. Plus cette valeur sera grande plus l’effet d’ombrage sera grand. C’est un peu comme si l’on rapprochait la lumière d’un objet, plus elle se rapproche, plus l’ombre de l’objet devient grande. Enfin, la dernière valeur est une valeur hexadécimale correspondant à la couleur de l’ombre.

Ce qui donne en pratique :

1
2
3
h1 {
text-shadow : 2px 2px 5px #aaa;
}

Exemple d’utilisation de la propriété Tex-shadow

Rendre le texte plus lisible – Ecrire en blanc ou ton sur ton

1
text-shadow : 1px 1px 3px #555;

Bienvenue sur le 41mag

Ombres multiples

1
text-shadow : 1px 1px 3px #aaa, 6px 6px 3px #ddd, -8px -8px 3px #999;

Bienvenue sur le 41mag

Contour

1
text-shadow:-1px 0px #555, 0px -1px #555, 1px 0px #555, 0px 1px #555;

Bienvenue sur le 41mag

Article du même thême : ...

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.