Creare elenchi ordinati animati e creativi con CSS3

 

Gli elenchi ordinati sono caratterizzati dalla numerazione progressiva degli elementi che compongono la lista. Nel linguaggio HTML, il tag da impiegare per inserire un elenco ordinato è <ol> (ordered list) e i suoi elementi relativi sono contraddistinti dal tag <li> (list item).

In questo articolo vedremo come personalizzare con stile degli elenchi ordinati in ben tre modi differenti, applicando ad essi inoltre anche delle piccole e simpatiche animazioni, visibili però soltanto con browser Firefox, in quanto l’unico che al momento supporta l’animazione di pseudo-elements.
 

Elenchi ordinati – Codice HTML e CSS di base

Il seguente codice, HTML e CSS è da intendersi come codice di base indipendentemente dal tipo dei tre stili che verranno mostrati.

 

Elenchi ordinati – Stile 1 – Numeri in forme rotonde

 

Elenchi ordinati – Stile 2 – Numeri in forme quadrate

 

Elenchi ordinati – Stile 3 – Numeri in forme circolari

Questi sono i 3 stili di elenchi ordinati <ol> che potrete ora sperimentare, e naturalmente, colori, testo e dimensioni sono liberamente personalizzabili. Potete guardate la demo per vedere i 3 stili dal vivo.
Buon lavoro!

Demo Autore

pixolo ads
Cambia Copertina
2762 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
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.
3
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
×