CSS - Pagina 3 di 5 - TomStardust.com

L’usabilità dei link testuali

Una guida per la corretta formattazione dei link di testo, evitando soluzioni poco usabili.

I collegamenti testuali di una pagina sono un elemento basilare; capita spesso però che vengano sottovalutati dagli sviluppatori, dando per scontato la loro riconoscibilità.

Per avere dei link usabili in realtà basta seguire alcune semplici convenzioni: implementarle non richiede molto tempo, ma i vantaggi per i vostri utenti saranno evidenti.

Le convenzioni da seguire

In certi casi il rischio di confondere chi visita la pagina è alto: quante volte vi è capitato di provare a cliccare su un testo che in realtà non era un collegamento? Per evitare questi problemi, bisogna tenere presenti alcuni parametri:

Colore – Uno dei fattori principali per distinguere un link dal resto della pagina è il suo colore, differente da quello del contenuto. Attenzione però, perchè il colore da solo non è sufficiente: pensate ai problemi che potrebbe incontrare un utente daltonico.
Stile – Ci sono numerosi stili a disposizione, dalla sottolineatura al grassetto, passando per il tipo di font utilizzato. L’importante è che venga usato uno stile differente dal resto della pagina: la pratica comune vede i link sottolineati, ed è bene seguire questa convenzione.
Contrasto – Un link deve essere in evidenza, e non deve essere difficile da identificare. Cambiare il colore non basta, il contrasto deve essere elevato.
Comportamento – Tra le convenzioni più diffuse c’è quella del cambio di cursore al mouseover. Vedere il puntatore trasformarsi in una mano è indispensabile.

Tenendo presenti questi fattori, è possibile ottenere molteplici combinazioni usabili. Sperimentare è lecito, ma ricordate che innervosire i vostri utenti con dei link non riconoscibili, o ancora peggio dei testi normali che sembrano collegamenti, potrebbe causare la loro fuga. Non aspettatevi di ricevere segnalazioni nel caso ci siano problemi di questo tipo, il visitatore medio lascerà il vostro sito innervosito senza concedervi altre possibilità.

Qual è la pratica migliore?

Di default i collegamenti hanno la sottolineatura con text-decoration: underline, ed un colore blu facilmente riconoscibile.

Personalizzando questa impostazione, tenete presente che la sottolineatura è tuttora la pratica migliore e più diffusa. Se però non vi piace il risultato finale, potreste considerare di utilizzare un border-bottom al suo posto, come viene fatto su A List Apart. Il risultato può essere ulteriormente migliorato con 1 pixel di padding-bottom:

Un’altra pratica piuttosto diffusa, che utilizzavo su questo sito qualche tempo fa, sono i link in grassetto, senza sottolineatura. Il problema è che la distinguibilità dei collegamenti in questo caso dipende molto dal colore. Un esempio chiaro si ha su TechCrunch: guardando la pagina in bianco e nero grazie a GrayBit, i link non sono così evidenti come quelli sottolineati:

Ovviamente le varianti possibili sono infinite, l’importante è essere sempre consapevoli di quello che si sta facendo.

Ricordate comunque che in certi casi l’originalità può essere messa da parte e riservata ad altri dettagli: dei link usabili e facilmente riconoscibili sono indispensabili per garantire ai vostri utenti la migliore esperienza di navigazione possibile.

Come allineare le immagini dei post di WordPress

Alcune semplici istruzioni per risolvere i problemi delle immagini affiancate al testo su Wordpress.

Ultimamente mi è capitato spesso di trovare persone in difficoltà con l’allineamento delle immagini all’interno dei post di WordPress.

Dalla versione 2.5 infatti è cambiato il modo in cui vengono gestite: se prima erano utilizzati gli orrendi tag HTML come align=”left”, ora il funzionamento è diverso e tutto viene gestito tramite le classi CSS aligncenter, alignleft ed alignright.

Se quindi avete dei problemi simili a questo screenshot nell’allineamento delle immagini accanto al testo, molto probabilmente il tema che utilizzate non è ottimizzato per le ultime versioni di WordPress, dalla 2.5 in poi.

La soluzione

Il rimedio è semplice, e si trova anche sul sito ufficiale di WordPress. Infatti è sufficiente modificare il foglio di stile del tema che utilizzate (di solito style.css), aggiungendo le seguenti righe di codice:
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
La parte relativa alla classe wp-caption è per i sottotitoli delle immagini, introdotti dalla versione 2.6 di WordPress. Se non li utilizzate potete evitare di inserire quella parte di codice, ma vi consiglio comunque di copiarla per evitare problemi.

Se volete avere un CSS valido, vi faccio notare inoltre che le definizioni sul border-radius non sono standard, quindi dovrete eliminarle e rinunciare agli angoli arrotondati dei sottotitoli.

Layout a tabelle con i CSS

Con Internet Explorer 8 sarà possibile usare la proprietà CSS display:table. Cambierà qualcosa per i web designer?

Dopo aver abbandonato l’uso delle tabelle per il layout, in questo periodo si sta tornando a parlare del loro utilizzo in forma diversa: non più all’interno del codice HTML, ma con la proprietà display dei CSS.

Come fa notare Digital Web Magazine, con l’imminente uscita di Internet Explorer 8 questa proprietà supporterà correttamente i valori table, table-row e table-cell per la prima volta su un browser Microsoft. Le ultime versioni di Safari, Opera e Firefox seguono già gli standard e non dovrebbero avere alcun problema.

Come funziona la tecnica?

Basta realizzare una semplice struttura nel codice HTML con dei div:

<div id="main"> <div id="nav"> ...contenuto della colonna </div> <div id="content"> ...contenuto della pagina </div> </div>

Quindi è sufficiente applicare gli stili relativi, facendo in modo che il contenitore principale abbia un display: table, e le singole colonne un display: table-cell:

#main { display: table; border-collapse: collapse; } #nav { display: table-cell; width: 180px; } #content { display: table-cell; width: 580px; }

Da notare che una tecnica simile dal punto di vista della semantica del codice non presenta alcuna controindicazione. L’aspetto tabellare infatti viene gestito interamente tramite i fogli di stile, il markup è ben organizzato e non ha particolari differenze rispetto a quello di un layout con i float.

Incompatibilità e difetti

Per ogni nuova tecnica è fondamentale considerare quanto essa sia realmente applicabile. Nel caso dei layout a tabelle con i CSS, uno dei punti deboli è sicuramente il mancato supporto di IE6 e IE7. Non poter usare questa soluzione sui due browser che da soli rappresentano più del 70% del mercato, la rende di fatto inutilizzabile: al momento è poco più che esercizio di stile.

Un altro aspetto poco considerato è l’ordine dei contenuti all’interno del codice HTML. Con questa tecnica si ripresenta uno dei difetti principali delle tabelle: l’impossibilità di organizzarli secondo la loro importanza. Usando un layout tabellare tutti i vantaggi del posizionamento con i float spariscono, dovendo per forza di cose ordinare gli elementi secondo il loro ordine di apparizione nella pagina.

Se volete continuare ad approfondire il discorso, vi rimando ad un post di Edit di qualche settimana fa. Dal mio punto di vista, potrebbe essere interessante sperimentare la tecnica per il futuro, ma con qualche riserva. Sarà infatti possibile usarla quando IE6 e IE7 spariranno dalla circolazione, ma i CSS3 saranno ormai alle porte con nuove soluzioni per gestire il layout di un sito.

CSS3: quando diventeranno uno standard?

Lo scarso supporto alle specifiche CSS3: ci vorrà ancora del tempo prima che diventino uno standard.

Se siete interessati allo sviluppo con i CSS, avrete sicuramente sentito parlare dei CSS3 e delle novità introdotte dal W3C. Migliore gestione delle colonne di un layout, nuove proprietà riguardanti ombre dei testi, nuovi selettori e la possibilità di utilizzare i Web Fonts sono solo alcuni dei miglioramenti previsti.

Sono in molti ad aspettare l’introduzione di questi aggiornamenti su tutti i browser, ma la cosa non sarà così semplice. La verità è che i CSS3 non diventeranno uno standard ancora per molto tempo.

Perchè i CSS3 non sono uno standard

Il motivo fondamentale è uno, e potreste già conoscerlo: Internet Explorer 6. Finchè sarà utilizzato questo browser, sarà necessario considerarlo a meno che non si voglia rinunciare ad una buona percentuale di utenti. Realizzando siti tecnici o altri progetti particolari è possibile non curarsi della minoranza che ancora lo utilizza, ma se lavorate in una web agency o avete clienti non troppo scaltri, è facile trovarsi ancora davanti IE6.

Le ragioni dell’ancora ingombrante presenza di Explorer 6 sono da cercare nel fallimento di Windows Vista. Il nuovo sistema operativo della Microsoft poteva facilitare la diffusione di IE7, ma non è stato così. Vista non ha spinto gli utenti ad effettuare l’upgrade come è successo in passato da Windows 98 a Windows XP, e le conseguenze adesso si accusano anche sul web.

Come utilizzare i CSS3

In questi casi l’unica soluzione resta il progressive enhancement, utilizzando le proprietà dei CSS3 solo con i browser più recenti (Firefox 3, Safari, Opera). L’importante è fornire comunque un CSS di base ad Internet Explorer, in modo che la visualizzazione non dia problemi. Le proprietà nuove non verranno considerate, senza interferire con il resto.

A seconda del target di utenti del vostro sito, potrete così fornire un’esperienza migliore ad una percentuale di lettori in costante aumento.

Falso Posizionamento Assoluto

Alla scoperta di un nuovo modo di costruire layout CSS, senza float e posizionamenti assoluti.

A List Apart ha pubblicato un articolo che propone una nuova tecnica di posizionamento con i CSS, chiamata Faux Absolute Positioning. In pratica è un’alternativa ai due metodi più diffusi, il posizionamento con i float e quello assoluto.

Le ragioni della ricerca di un nuovo metodo per la realizzazione di layout CSS sono nella necessità di risolvere problematiche complesse e non così frequenti: si parla di siti dinamici, dove gli utenti possono magari decidere la posizione degli elementi nella pagina, con tutte le difficoltà che ne derivano.

Proprio per questo la tecnica del Falso Posizionamento Assoluto cerca di unire i pregi dei metodi conosciuti, eliminandone i difetti. In realtà non esattamente così, ma approfondiamo l’analisi per capire meglio.

La tecnica

Il codice HTML utilizzato deve servire a costruire una struttura a griglia, con linee orizzontali ed item (che rappresentano le colonne), in questo modo:

<div class="line"> <div class="item" id="item1"> <p>contenuto</p> </div> <div class="item" id="item2"> <p>contenuto</p> </div> <div class="item" id="item3"> <p>contenuto</p> </div> </div>

Sulla tecnica originale è presente un altro div intorno al contenuto, ma ai fini del layout non è rilevante.

Il CSS relativo invece è il seguente:

.line { float: left; width: 100%; display: block; position: relative; } .item { position: relative; float: left; left: 100%; }

Infine per posizionare ogni item, serve una dichiarazione come questa:

#item1 { margin-left: -100%; width: 20%; }

In pratica per ogni item la posizione viene assegnata tramite un margin-left negativo. Per chiarirvi le idee, ho realizzato un esempio di layout a 3 colonne costruito in questo modo.

Considerazioni

Il vantaggio della tecnica è che ogni elemento viene posizionato facendo riferimento ad un punto ben preciso, cioè il margine destro del layout. Questo è un punto di forza preso direttamente dal posizionamento assoluto, con il vantaggio che gli elementi non vengono estratti dal normale flusso del codice, ed inoltre il contenuto continua a definirne l’altezza, cosa che non succede utilizzando i float.

Il risultato è stabile, rimane valido sia ingrandendo il testo che ridimensionando la finestra, e funziona su tutti i browser senza richiedere nessun hack, nemmeno per IE6.

Sembrerebbe un’ottima soluzione quindi, ma i difetti non mancano. Il più evidente è il gran numero di div utilizzati: se dovete realizzare un layout semplice a 2 o 3 colonne, non usate questo metodo e magari seguite gli esempi di Layout Gala di Alessandro Fulciniti.

Un altro problema riguarda le unità di misura, che devono essere sempre le stesse per posizionare gli elementi. Non potrete combinare percentuali, em, e pixel.

In conclusione, non vedo molte applicazioni per questa tecnica nel lavoro di tutti i giorni, ma per particolari esigenze potrebbe essere un’alternativa da considerare. Tenetela presente per i momenti di difficoltà, almeno finchè non arriveranno i CSS3 con il modulo per i layout a colonne.

Cosa manca nei CSS?

Mancanze e difetti più evidenti dei CSS, in un articolo aperto a opinioni e suggerimenti.

Senza dubbio i CSS sono uno strumento essenziale per ogni web designer, ma non sono esenti da difetti. Prendendo spunto da un recente post di Rockholderdesign, ho voluto riassumere quelle che secondo me sono le più gravi mancanze.

Ecco cosa che mi piacerebbe vedere implementato.

Selettori ascendenti

E’ una buona pratica l’uso dei selettori discendenti per evitare l’abbondanza di classi, ma al momento non esiste modo di selezionare il genitore di un particolare elemento.

Posizionamento verticale

Alcune azioni apparentemente intuitive sono fin troppo complicate con i CSS. Ad esempio il posizionamento orizzontale è elementare, ma centrare un elemento verticalmente non è così semplice.

Espressioni matematiche

Non è possibile usare formule per calcolare una dimensione, come ad esempio width: 100% – 5px;

Contenimento dei float

Non esiste una proprietà per far contenere ad un elemento un float (problema noto anche come auto-clear di un div). Ci sono degli hack, ma spesso portano a conseguenze indesiderate.

Background multipli

Attualmente è impossibile specificare una doppia immagine di sfondo su un elemento. La possibilità è prevista nei CSS3, e sarebbe di grande aiuto per evitare markup aggiuntivo.

Angoli arrotondati

I CSS permettono di utilizzare solo forme rettangolari. Sarebbe utile l’introduzione degli angoli arrotondati, così come quella di altre semplici forme facilmente gestibili dal foglio di stile.

Variabili

L’introduzione delle variabili sarebbe un vero passo avanti per i CSS. Poter dichiarare colori, bordi e altri elementi in maniera sintetica agevolerebbe il lavoro. C’è qualche speranza per il futuro, ma è ancora un’ipotesi lontana.

Colonne

Realizzare dei layout con 2, 3 o più colonne è ovviamente possibile, ma anche in questo caso non esistono dei moduli CSS appositi. Sarebbero sicuramente utili delle proprietà su misura per dividere uno spazio in colonne.

Maggiore coerenza tra i browser

Il punto fondamentale, non imputabile direttamente ai CSS. Ciò che crea più problemi tra gli sviluppatori è il differente supporto tra i vari browser esistenti. Alcuni come Safari e Opera si spingono fino ai CSS3, altri come Explorer non arrivano nemmeno alle specifiche dei CSS 2.1. Maggiore coerenza non farebbe male.

Alcuni di questi punti sono caso di studio per le future specifiche dei CSS, altri sono solamente delle ipotesi. Secondo voi cosa altro manca? Poche aggiunte faciliterebbero il compito di chi lavora ogni giorno con i fogli di stile: non sono problemi insormontabili e c’è sempre un modo per aggirarli, ma riuscire ad evitare hacks e markup aggiuntivo sarebbe un sogno.

Il Framework CSS ideale

I Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze. In realtà per me non è così, il mio CSS di base è costruito su misura.

In questi giorni ho ottimizzato il CSS di base che utilizzo come partenza per tutti i miei lavori. Scartare a priori l’idea di utilizzare un qualsiasi Framework CSS, come Blueprint, è stata la prima cosa che ho fatto.

Per chi non lo sapesse i Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze, ma che almeno nel mio caso complicano solo il lavoro. Spesso proprio questa generalità implica un’inutile mole di codice, che nella maggior parte dei casi non viene utilizzato.

Queste soluzioni non potranno mai essere universali: ognuno è abituato ad utilizzare un metodo diverso, e CSS Reset a parte tutto il resto ha comunque bisogno di essere personalizzato.

E’ appunto solo il CSS Reset di Eric Meyer che uso come punto di partenza, perchè consente di avere una buona coerenza tra i vari browser senza i problemi del reset con il selettore universale “*”.

Nel mio caso ho eliminato i selettori che non utilizzo per alleggerire il codice, ma la base è sempre quella di Eric.

Inoltre una comoda aggiunta per la quale ho rubato l’ispirazione a Piotr, è l’inserimento di una sezione dedicata ai colori utilizzati, all’inizio del CSS. Un comodo riferimento durante lo sviluppo, anche per eseguire al volo dei copia-incolla dei codici esadecimali.

Il risultato finale è un CSS che potete vedere a questo indirizzo, ma che non è pensato per essere adatto a tutti, l’ho realizzato esclusivamente per me.

Il mio consiglio è di ispirarsi alle varie soluzioni che offre la rete, ma costruirsi un CSS di base secondo le proprie esigenze. Solo così potrete ottimizzare i tempi nella scrittura di un foglio di stile.

CSS3 Web Fonts: test pratico

Istruzioni d’uso per i Web Fonts, nuovo modulo dei CSS3.

Con i CSS2 è possibile avere un buon controllo sui font utilizzati in una pagina web. Basta dichiarare un elenco di font, e se il primo non è disponibile il browser cercherà il secondo, fino all’esaurimento dei font dichiarati.

Le cose però sono state sviluppate ulteriormente con i CSS3, che vedono l’introduzione dei Web Fonts.

Cosa sono i Web Fonts? Sono un miglioramento che consente tramite CSS di far scaricare automaticamente all’utente dei font non installati sul proprio sistema operativo. In questo modo le pagine saranno visualizzate esattamente come pensato dal graphic designer, senza bisogno di ricorrere a tecniche di image replacement.

In realtà il documento del W3C che parla di Web Fonts è stato creato il 2 Agosto 2002, ma come noto dalla dichiarazione di uno standard all’utilizzo pratico il cammino è lungo. Ne parlo ora perchè Safari 3.1 è il primo browser a supportarli, consentendo di iniziare ad usare questa tecnica.

Niente infatti vieta di utilizzare i Web Fonts, che saranno trascurati dai browser che non li supportano.

Per usarli, è sufficiente inserire all’interno del CSS una dichiarazione di questo tipo, indicando il percorso per scaricare il font:

@font-face { font-family: 'Bimini'; src: url('bimini.ttf'); }

A questo punto sarà possibile usare il font dichiarato (Bimini) senza preoccuparsi della sua presenza sul computer dei visitatori:

h1 { font-family: Bimini, Arial, sans-serif; }

Da notare che se si vuole usare il nuovo font in grassetto, va dichiarata anche questa variante:

@font-face { font-family: 'Bimini'; font-weight: bold; src: url('bimini.ttf'); }

Stesso discorso per il corsivo e le altre combinazioni a disposizione.

Se avete Safari 3.1 e volete testare i Web Fonts, ho preparato una pagina demo. Utile anche per chi vuole vedere il CSS in pratica.

A questo punto potete utilizzarli liberamente, al momento solo chi usa Safari avrà un’esperienza migliore.

Il mio consiglio però è di farlo in maniera responsabile. Ricordate che dovreste usare solo font gratuiti con licenza di libera distribuzione, e soprattutto che verranno scaricati dal browser dei visitatori. Considerando che esistono font dal peso superiore ai 100kb, valutate con attenzione ogni cosa prima di usare i Web Fonts.

6 consigli per un CSS accessibile

6 semplici metodi per avere un sito più accessibile ed usabile, con un minimo di attenzione nella creazione dei fogli di stile.

I CSS hanno rivoluzionato il mondo del Web Design, permettendo di arrivare ad una separazione totale tra presentazione e contenuti. Sono senza dubbio uno strumento potente, ma a volte è bene usarli con cautela, per evitare problemi di leggibilità e più in generale di accessibilità.

In questo post voglio descrivere 6 semplici metodi per avere un sito più accessibile ed usabile, con un minimo di attenzione nella creazione dei fogli di stile.

1. Colore di sfondo del body

Ne avevo già parlato in passato, ma è sempre bene ricordarlo. E’ fondamentale ricordarsi sempre di settare un colore di sfondo del body:

body {background-color: #fff}

In questo modo sarà garantita una corretta visualizzazione anche per gli utenti che hanno delle impostazioni dei colori non standard.

Se non viene assegnato nessun colore, il rischio è che i visitatori si trovino davanti una pagina illeggibile per colpa dei loro stessi settaggi.

2. Interlinea

Se volete rendere leggibili le vostre pagine, fate in modo che i paragrafi di testo siano ben distanziati tra loro. E’ naturale che il font debba essere sufficientemente grande, ma non bisogna dimenticarsi di usare una line-height tra 1.2 e 1.6.

3. Link riconoscibili

Inutile girarci intorno, i link testuali è bene che siano sottolineati.

Questo però non basta, per raggiungere l’eccellenza è bene utilizzare tutte le pseudoclassi che ci sono a disposizione, ovvero :link, :visited, :hover, :active e :focus.

Differenziate lo stato :link da quello :visited per far orientare meglio i vostri visitatori, e ricordatevi che non esiste solo il mouse. Proprio per questo è bene assegnare i comportamenti della pseudoclasse :hover anche ad :active e :focus.

Non limitatevi ad applicare tutti gli stili solo all’elemento a.

Un esempio pratico:

a:link { background: #fff; color: #f00; text-decoration: underline; } a:visited{ background: #fff; color: #f77; text-decoration: underline; } a:hover, a:active, a:focus{ background: #f00; color: #fff; text-decoration: none; }

4. Font generici

E’ sempre bene ricordare che l’utente per i motivi più vari potrebbe non avere installati i nostri stessi font sul sistema operativo. Per questo motivo è sempre bene specificare un font generico:

body{ font-family: Arial, Verdana, sans-serif; }

Questo font sarà utilizzato in mancanza di alternative.

5. Testi a dimensione variabile

Il problema riguarda IE6 ed i suoi predecessori, ma al momento non è ancora trascurabile. Tutti i testi la cui dimensione è espressa in pixel, non possono essere ingranditi (o rimpiccioliti) dall’utente.

Meglio utilizzare le dimensioni in percentuale o em.

Il futuro, almeno guardando Firefox 3, Opera e IE7, è invece orientato verso la possibilità di zoomare direttamente la pagina.

In ogni caso state sempre attenti a non utilizzare font troppo piccoli per lunghi paragrafi di testo. Un sito leggibile a fatica non potrà mai essere apprezzato.

6. CSS per la stampa

Se avete un foglio di stile per la stampa, dichiarato tramite l’attributo media=”print”, approfittatene per offrire all’utente un’esperienza su misura.

Per prima cosa cambiate il font utilizzando un serif, più leggibile sulla carta stampata. Considerate poi che chi vuole stampare un documento lo fa per il suo contenuto: menu di navigazione, banner, path e altri elementi di contorno diventano inutili, eliminateli.

Seguite queste semplici regole per migliorare il vostro sito, ed i visitatori vi ringrazieranno.

Text-shadow: effetto ombra sul testo con i CSS

Con i CSS è possibile applicare un’ombra sul testo senza usare nessun programma di fotoritocco. Il testo dell’immagine qui sopra è stato realizzato grazie alla proprietà text-shadow, fino a poco tempo fa presente solo su Safari (fin dalla prima versione!).
Adesso il supporto sarà allargato anche ad Opera con la versione 9.5: vediamo come funziona.

Servono 4 parametri: spostamento verso destra dell’ombra, spostamento verso sinistra il basso, sfocatura e colore.
Ecco un esempio pratico per un titolo con ombra nera:

h2 { text-shadow: 2px 2px 3px #000; }

Interessante anche la possibilità di avere più ombre su un unico testo, basterà separare i valori con una virgola:

h2 { text-shadow: 2px 2px 3px #000, 1px 3px 5px #f00; }

Al momento la proprietà è quindi poco supportata, ma potrebbe essere un’idea utilizzarla sul proprio sito per gli utenti che usano Safari ed Opera. L’importante è fare sempre attenzione che il testo si veda anche sugli altri browser. La maggioranza non vedrà l’ombra, quindi è assolutamente vietato usare testi su background dello stesso colore!

Se volete approfondire, c’è qualche altro esempio pratico di text-shadow su CSS3.info; se invece vi interessa essere sempre aggiornati sull’evoluzione dei CSS, un’ottima risorsa è The Future of Style, aggregatore del W3C che raccoglie tutte le maggiori notizie sull’argomento.