CSS  »  Articoli  »  Effetti con CSS 

Recentemente due articoli sullo stesso tema hanno presentato un'idea semplice ed efficace per aggiungere un effetto molto accattivante ai titoli testuali: CSS Trick: Pure CSS Text Gradient e CSS Gradient Text Effect.

In questo articolo riprenderemo la tecnica per poi presentare una versione alternativa. Ecco una piccola anteprima di un esempio e il suo screenshot:

Figura 1 - Screenshot dell'esempio

Effetto Gloss con le PNG semitrasparenti

L'idea di base del primo esempio, ripresa dagli articoli citati in apertura, è piuttosto semplice: all'interno dei titoli h2 su cui si vorrà avere l'effetto gloss basta inserire nell'HTML un elemento span vuoto che precede il testo:

Lo span verrà poi disposto sopra al titolo grazie ai posizionamenti assoluti, con una tecnica molto simile alla cover-up span. Lo span, largo il 100% e alto la metà del titolo, verrà quindi posizionato sopra il titolo e grazie a una PNG semitrasparente darà l'effetto voluto.

L'immagine di sfondo usata è una PNG grande 10 per 20 pixel con un gradiente che va dal bianco al trasparente, e consente di ottenere un effetto gloss sul testo di qualsiasi colore, a patto che sia su sfondo bianco. Vediamo le due regole dell'esempio con le dichiarazioni chiave in grassetto:

Da notare che viene usato come selettore della seconda il child selector (h2>span), per nascondere la regola a IE6 e versioni inferiori, dato che le vecchie versioni di IE non hanno supporto per la semitrasparenza delle PNG. L'esempio avrà comunque il testo gloss su IE7 e le ultime versioni di Opera, Firefox e Safari.

Altri articoli

Altre guide

Altre newsletter