Formattazione di una lista ordinata con css

Diamo un po di colore. Mentre ero alla ricerca di un’immagine per il banner del mio ultimo articolo, mi sono […]
Formattazione di una lista ordinata con css

Diamo un po di colore.

Mentre ero alla ricerca di un’immagine per il banner del mio ultimo articolo, mi sono ritrovato con qualche spunto creativo su come formattare i numeri di una lista ordinata con i css.
Ho impostato il tutto seguendo l’articolo – Styling ordered list numbers – di Roger Johansson. Vediamo subito di cosa si tratta.

Strutturare il contatore

<ol>
    <li>Favola <span>(1883, olio su tela)</span></li>
    <li>Idillio <span>(1884, olio su tela)</span></li>
    <li>Il Bacio <span>(1907-1908, olio su tela)</span></li>
    <li>Pallade Atena <span>(1898, olio su tela)</span></li>
    <li>La Tragedia <span>(1897, gessetto nero-matita-sfumato-oro)</span></li>
</ol>

Il codice html è composto da una semplice lista ordinata. Per quanto riguarda il css, ovviamente può essere modificato a tuo piacimento ma tieni d’occhio ad alcune proprietà fondamentali.

ol{
    counter-reset:list;
    margin:100px;
    padding:0;
}

La proprietà più importante in questa prima parte di codice è sicuramente counter-reset. Questa regola ci permette di inizializzare un contatore con il quale è possibile avere una numerazione automatica. Gli ho associato il nome ‘list’, ma puoi inserirne uno qualsiasi.

Nota: Se dopo il nome list inseriamo anche un numero, ad esempio 5, il contatore partirà dal numero 6 a seguire.

ol li{
    list-style:none;
    position:relative;
    margin:0 0 20px 20px;
    padding:4px 8px;
    font-size:23px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#333;
}

Quest’altra dichiarazione oltre ad associare alla lista spostamenti, colore, font e cose varie, ha due proprietà essenziali, la position:relative che crea l’ambiente per spostare successivamente i numeri del contatore, mentre list-style:none elimina i marcatori, cioè i numeri che verrano poi sostituiti con quelli del contatore.

Formattazione dei valori

ol > li:before{
    content:counter(list);
    counter-increment:list;

    position:absolute;
    top:-2px;
    left:-40px;
    width:30px;
    height:25px;
    padding-top:5px;
    color:#fff;
    background:#2091a1;
    font-weight:bold;
    text-align:center;
    font-size:16px;
    border-radius:30px;
    border:4px solid #fff;

    -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
    background: rgb(31,152,169); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFmOThhOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzAzNzk4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(31,152,169,1) 0%, rgba(3,121,131,1) 91%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31,152,169,1)), color-stop(91%,rgba(3,121,131,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(31,152,169,1) 0%,rgba(3,121,131,1) 91%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(31,152,169,1) 0%,rgba(3,121,131,1) 91%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(31,152,169,1) 0%,rgba(3,121,131,1) 91%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(31,152,169,1) 0%,rgba(3,121,131,1) 91%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f98a9', endColorstr='#037983',GradientType=0 );

Andiamo con ordine.

Ho suddiviso quest’ultima parte in più sezioni così da risultare più leggibile.

Nella prima parte attraverso la proprietà content richiamo il contatore creato in precedenza. Con quella counter-increment attivo l’incremento dei valori. Nota: Se a seguire della parola list per la proprietà counter-increment inseriamo anche un numero, ad esempio 10, il contatore ordinerà la lista moltiplicando ogni numero per 10. Quindi ci ritroveremo una numerazione di questo tipo: 10-20-30-40-50 ecc.

Nella seconda parte ho settato le proprietà relative allo spostamento e alla formattazione dei numeri del contatore.

Nell’ultima parte ho completato la formattazione aggiungendo alcune proprietà css3, l’ombra e il gradiente. Il codice di quest’ultimo l’ho prelevato da colorzilla, un ottimo tool per generare sfumature e prelevarne direttamente il codice css3.

Ti è piaciuto?

Spero che l’articolo sia stato di tuo gradimento. Per qualsiasi dubbio o segnalazione scrivi pure nei commenti o sulla nostra fanpage. Alla prossima 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github