Voulez-vous créer un texte de titre dégradé sans utiliser Photoshop ? Voici une technique CSS simple pour vous montrer comment créer cet effet en utilisant uniquement des images CSS et png. Cette méthode a été testée pour être adaptée à la plupart des courants. Bien sûr, IE6 nécessite un hack prenant en charge le PNG transparent (Heureusement, Microsoft travaille dur pour mettre automatiquement à niveau IE6 des utilisateurs vers IE7^.^, lecture complémentaire : Attention : une mise à jour automatique d'IE7 arrive bientôt)
Avantages
Il s'agit d'une astuce purement CSS, sans utiliser de script ja ou flash, et elle peut fonctionner normalement sur la plupart des navigateurs (IE6 nécessite un hack prenant en charge le PNG transparent)
C'est le titre parfait design, vous n'avez pas besoin d'utiliser Photoshop, ce qui vous fera gagner beaucoup de bande passante et de temps
Vous pouvez utiliser cet effet avec n'importe quelle police Web, et la taille de la police est également variable
Il comment ça marche. travail ?
L'astuce est très simple. Nous utilisons simplement un png transparent de 1px de large sur le texte
html
Texte dégradé CSS
CSS
La clé est ici :
h1 { position : relative }
h1 span { position : absolue } h1 {
police : gras 330%/100% "Lucida Grande" ;
position : relative
couleur :
}
h1 span {
arrière-plan : url (gradient.png) répéter- x;
position: absolue;
display: block;
width: 100%
height: 31px;
C'est ça, tu l'as fait ^_^; Cliquez ici pour voir l'exemple.
Activez-le pour prendre en charge IE6
Le hack suivant permet simplement à IE6 de prendre en charge les images transparentes au format PNG-24
.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale')
}
Version générée par jQuery
Si vous ne voulez pas avoir de balises
vides dans votre code, vous pouvez utiliser javascript pour le générer dynamiquement. Voici une méthode de production jquery simple
<script></script> <script> <BR>$(document).ready(function(){ <BR> //prepend span tag to H1 <BR> $("h1").prepend("<span></script>");
});
Téléchargement du package DEMO.