permalien Degradé Facile avec CSS

Rédigé le Lun 03 Aoû, 2009 16:18:17 Ajouter un commentaire
Présentation:

Le dégradé de texte est une simple astuce CSS qui vous permet d'améliorer l'apparence de votre site en plaçant des dégradés sur les polices des titres en n'utilisant rien d'autre que le CSS et une image PNG.

Fonctionnement:

L'astuce est très simple. Le texte Grannt en PNG devrait commencer avec votre couleur d'arrière-plan (dans ce cas, nous utilisons le dégradé blanc).

Tout d'abord le code HTML mis en place. Chaque titre (de préférence les tags d'entête) utilise un élément imbriqué supplémentaire vide span.

Le code ressemble à ceci :

css

Utilisez le CSS pour définir le style du h2. Vous n'aurez pas besoin d'utiliser le style de l'exemple. Utilisez le vôtre. La seule chose importante est de veiller à ce que vous ayiez défini la propriété position à relative.


css

Maintenant, le dégradé.

Nous mettons un PNG transparent comme image de fond pour l'élément span et définissons la propriété position à absolute pour qu'il puisse se placer au-dessus du texte.



css

Malheureusement, nous ne vivons pas dans un monde parfait et tous les navigateurs ne prennent pas en charge la transparence PNG. Donc, pour ces navigateurs, prenez-en compte.


css

Ainsi, le span vide est au-dessus du titre et il est allongé sur toute la largeur et la hauteur. Puisque le dégradé est inclus dans la couleur de fond du titre il ne sera pas visible dans l'écart entre les lettres rendant l'effet réel.


Un petit aperçu:

http://album-photo.uuuq.com/tuto/css/text-gradient/sample/