Text-shadow cross browser

La proprietà text-shadow unita alla pratica del font-face, possono garantire effetti molto ricercati nella stilizzazione del testo.
Text-shadow cross browser

Diamo tono ai testi

La tecnica dell’image replacement, ancora validissima per sostituire loghi o più in genearle immagini da trasformaree in link, non la ritengo più una scelta ottimale per la semplice sostituziuone di un testo come potrebbe essere un titolo di pagina o un paragrafo. Tecniche migliori sono intervenute a nostro vantaggio e i browser sembrano rispondere più che bene a queste nuove implementazioni.

Panoramica sul crossBrowsing

Il prospetto che segue, preso come sempre dall’utilissimo “can i use“, ci fornisce una panoramica completa sull’utilizzo della proprietà text-shadow, l’oggetto principale di questo articolo. Da quanto si evince, tutti i browser la interpretano correttamente tranne ovviamente Internet Explorer.

text-shadow

Il codice

Senza demoralizzarci troppo analizziamo immediatamente la proprietà in questione. I valori in tutto sono 4, i primi due definiscono lo scostamento dell’ombra da sinistra e da sopra mentre il terzo valore definisce la dimensione dell’ombra. Il quarto e ultimo valore infine definisce semplicemente il colore.

#element {
    text-shadow: 5px 5px 1px #cccccc;
}

Adesso rivediamo con la stessa rapidità quanto sia facile complicarci la vita per rendere cross-browser la medesima proprietà:

#element {
    text-shadow: 5px 5px 1px #cccccc; /* Tutti i browser moderni */
    filter: dropshadow(color=#cccccc, offx=5, offy=5); /* IE */
}

Internet Explorer

“Rendere cross-browser questa proprietà” è davvero un parolone, a meno che tu non abbia voglia di ricorrere alle immagini, io non ne ho più (di voglia), ti toccherà utilizzare i filtri di microsoft per riuscire ad ottenere un effetto che si avvicina alla lontana ad un ombra. Lo scostamento da sinistra e da sopra funziona abbastanza bene ma l’effetto sfocatura è davvero meglio lasciarlo perdere. Consiglio quindi il text-shadow per internet explorer solo nei casi in cui dovete applicare una piccola ombra di un pixel di scostamento per creare quel leggero scostamento dalla superficie, ma per nient’altro.

Jquery

Infine se vuoi cimentarti, ma sinceramente non ne vale la pena, ti linko un plugin di jquery che consente di simulare l’ombra per internet explorer.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github