Geckozone

Oggi vedremo un semplice trucchetto per abbellire i font del nostro sito in poche righe di codice tramite l’utilizzo nativo di CSS3! Con CSS3 addobbare le nostre pagine web non è mai stato così semplice; vediamo quindi insieme come aggiungere una traccia esterna al nostro font.

La funzione purtroppo è ancora in fase di sviluppo e possiamo utilizzarla solamente sui browser che usano il webkit come motore, quindi Chrome e Safari sia su Desktop che su iOS e Android. Per i browser non supportati possiamo utilizzare qualche trucchetto. Potete vedere in anteprima la DEMO del progetto.

text-stroke

Questa è la funzione nativa utilizzata solamente dai browser webkit, tramite questa possiamo far apparire un contorno del numero di pixel e del colore che desideriamo:

Esempio:

-webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: black;

Oppure:

-webkit-text-stroke: 1px black;

Possiamo anche far in modo che, nel caso in cui si utilizzi un browser non supportato, la scritta venga visualizzata in un determinato colore, mentre nei browser webkit (supportati) essa abbia un colore differente. Ad esempio, possiamo far in modo che la scritta sia semplicemente nera su Firefox , mentre su Chrome apparirà bianca con contorno nero.

Codice:

color: black;
 -webkit-text-fill-color: white;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: black;

L’effetto è davvero divertente e interessante, ma cosa accade per tutti gli altri browser non supportati? Esiste un trucchetto (valido soltanto sui browser recenti che supportano il CSS3) che ci consente di emulare l’effetto del contorno utilizzando le ombre proiettate da ‘text-shadow‘, vediamo quindi il codice:

text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;

Come potete vedere, attraverso l’utilizzo di più ombre sul testo, posizionate in modo ‘strategico‘ possiamo creare lo stesso effetto di text-stroke!

Per vedere qualche esempio pratico puoi guardare qua:

DEMO

Tutto questo, come si può ben pensare, NON funziona su Internet Explorer, perché? Chiedetelo alla Microsoft!
A presto!

CSS, CSS3