Come utilizzare pittogrammi di webfont al posto di immagini con CSS3

 

In questo tutorial andremo a vedere come utilizzare i pittogrammi di un webfont per sostituire le immagini che normalmente usiamo in molteplici ambiti nelle nostre pagine web. Vedremo come utilizzare i pittogrammi su pulsanti, icone, titoli Headline, in moduli di input, in liste di elementi ed in menù di navigazione. A fine articolo, potrete vedere la demo e scaricare i file contenenti tutti gli esempi ed i relativi codici CSS pronti all’uso.

L’utilizzo di un webfont sulle nostre pagine web può essere implementato attraverso la proprietà CSS @font-face per la quale ne abbiamo parlato anche qui. In questo esempio sarà utilizzato Entypo, un font OpenType gratuito che contiene più di 100 pittogrammi.

Per utilizzare il tipo di carattere, bisogna semplicemente digitare ogni carattere realativo al pittogramma. In questo esempio utilizzeremo uno span che genererà un pittogramma utilizzando il selettore :after, mentre la proprietà content conterrà il carattere relativo al pittogramma che desideriamo usare.

 
 

Creazione di pulsanti

Risultato:

 

Crezione di icone

Risultato:

 

Creazione di titoli Headline

In questo caso sarà utilizzato il webfont denominato League Gothic.

Risultato:

 

Creazione moduli di imput

Risultato:

 

Creazione liste di elementi

Risultato:

 

Creazione di menù di navigazione

Risultato:

Demo Download Sito Web | Autore

pixolo ads
Animal Comix
4616 | Articolo pubblicato 4 anni fa nella categoria Css - Html, Pulsanti.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
2
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×