-
Par Maximum 34 le 8 Septembre 2013 à 17:14
Propriété CSS SHADOW
- La propriété text-shadow permet d'ajouter un effet d'ombre sur un texte.
Text-shadow se définit selon plusieurs critères et dans un ordre précis:
text-shadow: [décalage horizontal] [décalage vertical] [netteté / flou de l'ombre portée] [couleur du texte de l'ombre] ;Exemple d'effets sur caractères de texte:
texte blanc, ombre grise très nette et très décalée text-shadow: 0px 15px 5px grey;texte jaune sans ombre
texte clair, ombre foncée, floue et peu décalée text-shadow: 2px 1px 2px black;texte noir sans ombre
texte noir, ombre jaune, floue et peu décalée text-shadow: 2px 1px 2px yellow;style néonOmbres multiples
polices pleinespolices en creux- La propriété CSS box-shadow permet de mettre une ombre dégradée autour d'un élément, texte ou image ou cadre ...
On définit l'ombre grace à plusieurs critères qui sont enregistrés dans cet ordre:
box-shadow: [décalage horizontal] [décalage vertical] [flou de l'ombre] [étendue de l'ombre] [couleur de l'ombre] [ombre interne / externe] ;Exemples d'effets sur cadre ou image:
box-shadow: 0 0 10px 4px grey; appliqué autour d'un cadrebox-shadow à l'intérieur et l'extérieur d'un cadrebox-shadow: 15px 15px 10px silver;
Pour visualiser les effets en ligne, générateur de box-shadow
A venir... Les utilisations pour effets au passage de la souris:
utilisation transition survol
5 commentaires