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:
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:
<h2><span></span>Il mio testo gloss con i CSS</h2>
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:
h2{position: relative;font: bold 250%/1 Tahoma,Arial,sans-serif;
text-transform: uppercase;margin: 1em 0 0;color: #56B11A}
h2>span{position: absolute;top: 0;
width: 100%;height: 55%;
background: url(bk.png) repeat-x}
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.
Effetto Gloss con l'opacità variabile
C'è una soluzione alternativa al primo esempio appena visto che non richiede l'impiego
delle immagini PNG semitrasparenti ma usa la proprietà opacity che è supportata
dalle versioni recenti di Firefox, Opera e Safari. Vediamo il secondo esempio
e le due regole CSS:
h2{position: relative}
h2>span{position: absolute;width: 100%;
height: 50%;background: #FFF;opacity: 0.6}
Per estendere l'effetto anche ad IE7, basterà usare la soluzione proprietaria
equivalente a opacity, che è filter. La dichiarazione specifica per IE verrà aggiunta
mediante il commento condizionale,
ecco il codice necessario:
<!--[if gte IE 7]>
<style type="text/css">h2>span{filter:alpha(opacity=60)}</style>
<![endif]-->
Il nostro esempio è così ultimato, e potremo decidere se ottenere un'effetto
più o meno marcato solo intervenendo con il CSS. A tal proposito, ricordo che la proprietà opacity
accetta un valore decimale da 0 a 1, dove 0 rappresenta un elemento totalmente trasparente e 1 dà un elemento
totalmente coprente. Per la proprietà filter di IE, i valori vanno specificati in un range da 0 a 100,
dove con 100 si avrà un elemento privo di trasparenza, ovvero totalmente coprente.
Ricordo infine che la proprietà opacity appartiene ai CSS 3, e sarà necessario
usare questo profilo per passare la prova del validatore.
Esempio 3
Nella serie CSS 3 a piccoli passi
abbiamo illustrato un modo semplice
per aggiungere proprietà CSS3 mediante
Javascript superando l'ostacolo della validazione. Nel terzo esempio viene
adottata questa tecnica, attraverso due semplici dichiarazioni nella sezione head della pagina:
<script type="text/javascript" src="addCSS.js"></script>
<script type="text/javascript">AddCSS('glossText.css')</script>
Il file glossText.css contiene la regola per lo span con tutte le dichiarazioni
necessarie, vediamola:
h2>span{position: absolute;bottom: 0;
width: 100%;height: 45%;
background: #333;opacity: 0.3;
filter: alpha(opacity=30)}
Vale la pena soffermarsi su come sia stato ottenuto l'effetto gloss in questo terzo esempio,
di cui riporto uno screenshot:
La pagina dell'esempio ha uno sfondo grigio scuro, e in questo
caso, invece di schiarire la parte superiore come nell'esempio precendente,
si tatta di scurire la parte inferiore, avendo sempre cura di usare per lo span un colore
di sfondo uguale a quello della pagina. Lo span quindi verrà posizionato assolutamente
nella parte in basso attraverso la dichiarazione bottom:0. Ricordo
a tal proposito che
se vengono omesse le coordinate per il posizionamento assoluto (come abbiamo fatto
nei primi due esempi) queste sono di default top:0;left:0.
Il nostro esempio è così ultimato con una semplice regola e
un piccolo file javascript. Se avessimo voluto utilizzare le PNG come nel primo esempio
visto, sarebbe stato necessario preparare una PNG semitrasparente ad hoc
il cui colore di sfondo coincida di partenza con quello della pagina.
Conclusioni e download
Abbiamo visto in questo articolo tre semplici tecniche per ottenere effetti grafici
sul testo accattivanti e leggeri. La compatibilità degli esempi visti è estesa alle ultime
versioni di IE, Firefox, Opera e Safari; sugli altri browser verrà semplicemente mostrato il testo
senza effetto gloss.
Gli esempi si sarebbero potuti sistemare anche per IE6 e IE5.5,
ma trattandosi di tecniche decorative da applicare
a due browser datati e la cui diffusione ad oggi è minima forse non vale la pena, visto anche il potenziale
problema in cui ci si può imbattere: titoli illeggibili in quanto totalmente coperti dallo span.
Un simile rischio è di fatto esteso a tutti i browser obsoleti che non supportano l'opacità
variabile delle PNG o le proprietà opacity e filter.
Qualora vi fosse la necessità di avere titoli grafici e una maggiore compatibilità,
converrebbe a questo punto utilizzare una tecnica di
image replacement.
Codice ed esempi sono disponibili per il download. Alla prossima.
