Vai al contenuto

Personalizzare gli elenchi numerati con CSS

Qualche dritta da developer in questo post ad alto contenuto tecnico. Elenchi numerati con CSS: le nostre istruzioni per l'uso!

17.10.14
Tempo di lettura:

Quanto spesso un designer si è presentato da voi con un elenco numerato in cui i numeri erano stati inseriti in simpatici pallini colorati, quadrati e forme strane? Quanto tempo e codice serve per una cosa così banale? La risposta ad entrambe le domande è la stessa: troppo. In passato era necessario ricorrere ad accrocchi poco eleganti, o che richiedevano a chi scriveva i contenuti di conoscere non poca sintassi HTML.

Ma le cose sono cambiate e CSS arriva in nostro soccorso, ecco come personalizzare gli elenchi numerati con poche righe.

Creiamo una lista ordinata e assegniamo una classe per poterla personalizzare facilmente. Naturalmente potete usare anche l’elemento padre, per evitare a chi scrive i contenuti, magari in wordpress, anche questo semplice passaggio.

<ol class=”nodopiano-numerata”>
   <li>Questo è il primo elemento</li>
   <li>Questo è il secondo elemento</li>
   <li>Questo è il terzo elemento</li>
   <li>Questo è il quarto elemento</li>
   <li>Questo è il quinto elemento</li>
</ol>

Rimuoviamo tutti gli stili predefiniti e l’indicatore di lista, in questo caso il numero.

.nodopiano-numerata {
   margin-left: 0;
   padding-right: 0;
   list-style-type: none;
}

Grazie alla proprietà “counter-increment” siamo in grado di contare quanti elementi di quel tipo vengono generati.

.nodopiano-numerata li {
   counter-increment: numerazione;
}

Usiamo la pseudo-classe :before per scrivere il numero che leggiamo dal contatore appena creato e mettiamolo in un pallino color nodopiano 😉

.nodopiano-numerata li::before {
   content: counter(numerazione);
   margin-right: 5px;
   font-size: 80%;
   background-color:#3b97a1;
   color: white;
   font-weight: bold;
   padding: 3px 8px;
   border-radius: 50%;
}

Ed ecco la vostra lista ordinata e personalizzata usando solo CSS, adesso potete inserirla nel vostro prossimo progetto, noi l’abbiamo già fatto!

Fonte: (treehouse)

Condividi su
  • Il metodo Agile all’interno di Nodopiano
    Chi applica e prova l’Agile non torna più indietro. Vuoi sapere come siamo giunti a…
    leggi tutto
  • Web Marketing Festival 2022: il futuro è qui
    Diffusione delle competenze digitali, promozione di temi sociali, innovazione e spettacolo: ecco il nostro WMF!
    leggi tutto
  • GDPR e Nodopiano: (s)piegare le regole
    Il GDPR ha cambiato fortemente il modo di raccogliere e utilizzare i dati degli utenti…
    leggi tutto
  • Come si diventa sviluppatori?
    Cura, semplicità e diffidenza sono i 3 principi da seguire se si vuole diventare sviluppatori
    leggi tutto
  • Chi ha paura della pagina bianca?
    Lo spazio bianco non è un nemico, è l'alleato per rendere un progetto grafico davvero…
    leggi tutto
  • Web 3.0: una rete di opportunità
    Web 3.0, privacy e criptovalute Cosa ci riserva il futuro?
    leggi tutto
  • Top 3 campagne marketing 2021
    Quali sono le campagne che più abbiamo amato nel 2021?
    leggi tutto
  • Trend Graphic Design 2022
    Il 2022 sarà un anno di grande semplicità e minimalismo per il mondo del Graphic…
    leggi tutto
  • Le 4P del Marketing Mix
    “Il marketing mix è la combinazione delle variabili controllabili di marketing che l’impresa impiega al…
    leggi tutto
  • Accessibilità nel web: il nostro impegno
    La web accessibility consente di fornire contenuti e funzionalità fruibili a qualsiasi utente, senza discriminazione
    leggi tutto
  • LaravelDay 2021
    Impressioni e opinioni del Team Sviluppo sul LaravelDay 2021
    leggi tutto
  • Gestione dei progetti in home working
    Nell’ultimo anno abbiamo investito molte energie per strutturare il nostro project management
    leggi tutto
  • Font e caratteri tipografici: una scelta di stile
    Scegliere il font per un progetto è un modo per avvicinarsi al cliente e comunicare…
    leggi tutto
  • PWA vs APP native: tutto quello che devi sapere
    La PWA è il mix ideale tra un'app e un sito web, riunisce le migliori…
    leggi tutto
  • La creazione di una campagna di sensibilizzazione
    Come comunicare un messaggio: dal concept della campagna alla data visualization, passando per i social…
    leggi tutto
  • Rebranding: a cosa ti serve?
    Il tuo brand è riconoscibile tra tutti gli altri? Cosa lo differenzia in maniera inequivocabile…
    leggi tutto
  • Come creare tabelle HTML responsive in puro CSS
    Come mostrare le tabelle di dati nei dispositivi mobile?Un problema che tutti si ritrovano a…
    leggi tutto
  • Perchè NodoPiano?
    Cosa vuol dire nodopiano? O meglio, nodo piano? Ve lo spieghiamo in questo post in…
    leggi tutto
  • Personalizzare gli elenchi numerati con CSS
    Qualche dritta da developer in questo post ad alto contenuto tecnico. Elenchi numerati con CSS:…
    leggi tutto