Effetto gradiente con i CSS e immagini PNG
Lunedì 21 Gennaio 2008 - 07:32
di Cesare Lamanna
Non so se è una tecnica completamente nuova. Fatto sta che è davvero semplice da implementare, l’ho capita persino io :P.
CSS Gradient Text Effect è pensata soprattutto per titoli e intestazioni, consente di creare facilmente un effetto gradiente sul testo usando i CSS, una piccola PNG trasparente e un pizzico di creatività. Il breve tutorial spiega anche come raggiungere la compatibilità con IE6, browser notoriamente privo del supporto per questo particolare tipo di immagini. Dal momento che nel markup è necessario ricorrere ad uno span vuoto, c’è pure la soluzione per i puristi del markup semantico: è infatti possibile inserire lo span via Javascript (nell’esempio ci si appoggia a jQuery). Che dire di più, credo niente, se non rimandarvi alla pagina dimostrativa.
Commenti
1
bell’effetto ed è effettivamente semplice da realizzare. grazie per il link.
2
Stupendo questo effetto! Di solito le scrittine del genere portano via un po’ di tempo (poco ma lo portano via). E pensare che molti ancora non sanno a cosa servono i CSS ;)
3
Peccato che si è rovinato sul finale con il commento per le versioni di IE, a sto punto era meglio usare l’html star come ho fatto su questo esempio
# - postato da Alessio Michelini - 21 Gennaio 2008 - 10:10
4
Grazie della risorsa è un’ottima idea per risparmiare un sacco di lavoro.
Proverò ad usarla nel mio sito.
5
a me su IE6 non si vede per nulla….
6
mi correggo… ho letto soltanto dopo che un solo esempio aveva applicato l’hack per ie6…
7
Bellissimo quel sito!!
Cmq io l’hack per ie non lo userei dato che lo ho usato in un progetto e poi mi sono successe molte cose strane con il layout (link che non si cliccano, form in cui nn si riesce a scrivere, eccetera, tutto risolvibile con il magico position:relative, però uno sbrocco assurdo).
# - postato da Nemesis Design - 21 Gennaio 2008 - 12:36
8
bello, grazie per la segnalazione, e vero che per usare png in ie6 bisogna usare hack, niente da fare.
# - postato da Avasilcai Daniel - 21 Gennaio 2008 - 18:48