Design

gestion des ombres portées sur les textes

Avatar for Matthieu de Softibox

Article par

Avant, il était impossible de faire des ombres portées sur les textes sans insérer des images trop lourdes au niveau du code HTML. Actuellement, grâce à cufon, la gestion des ombres au niveau des textes devient un jeu d’enfant. Pour cela, il suffit de mettre ces quelques code au niveau de notre page HTML.

1- Appel du script

Le premier fait allusion, au fichier js qui est récupérable sur le site de cufon et le deuxième, au font qui a été généré par cufon elle-même

2 – Implémentation de cufon avec les ombres portés

Ce bout de code permet à cufon de détecter quelle balise portera les ombres. Dans le cas ci-dessus, ce sera les balises :
– h1 : ombre haut : couleur : #fff décalé de 1px vers le haut
ombre bas : couleur : #333 délacé de 1px vers le bas
– h2 : ombre haut : couleur : #fff décalé de 1px vers le bas
ombre bas : couleur : #333 délacé de 1px vers le haut
– h3 : ombre unique vers le bas : couleur : #333 décalé de 1px
– h4 : ombre unique vers le haut couleur : rgba(51, 51, 51, 0,6) décalé de 1px

3 – Rendu navigateur

Conclusion

Outre cette possibilité de gérer les ombres portés, Cufón est, à mon avis le plus abouti des systèmes de remplacement de police. Voici ces autres caractéristiques :

  • Gestion du rollover
  • Gestion des couleurs avancées (Cufón gère même les dégradés )
  • Gestion de la hauteur de ligne (line-height)
  • Gestion des opacités
The following two tabs change content below.

Matthieu de Softibox

Partagez!
  •  
  •  
  •  
  •  
  •  
  •  

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *