Non so quanti lettori parlino francese, ma ho trovato la segnalazione molto sfiziosa e ho pensato di riprenderla qui sul blog: Checklist en CSS, ovvero come creare to-do list con HTML e CSS.
Ho ripreso la tecnica e ho preparato un piccolo esempio. Ma prima di procedere con il CSS essenziale, diamo uno sguardo al markup.
La to-do list è racchiusa in un ul class="todo", e ogni task viene inserito in un list-item li. I compiti ultimati vengono segnalati grazie ad elementi del, che aggiungono senza dubbio significato semantico e visivo: ecco infatti come si presenta
la todo-list con un minimo di CSS per font e colori, in cui gli elementi del sono sbarrati: è questa infatti la loro presentazione di default.
Ora procediamo con il CSS dell'esempio: dopo aver rimosso margini, padding e il marcatore
da lista e list-item, viene assegnato un padding sinistro di 20px ai list-item e l'icona di sfondo.
Il punto chiave dell'esempio è la personalizzazione dei del: per recuperare il padding dei list-item e ridefinire il marcatore basterà dichiarare un margine sinistro negativo pari a -20px, avendo cura di renderli block-level attraverso display:block.
Verrà poi dichiarato un padding sinistro e un icona anche per gli elementi del, così da coprire l'icona dei list-item e infine il testo viene riportato normale grazie alla proprietà text-decoration. Il CSS dell'esempio è incorporato, ma riporto qui per comodità le dichiarazioni essenziali:
ul.todo, ul.todo li{
list-style: none;
margin: 0;
padding: 0
}
ul.todo li{
width: 15em;
padding-left: 20px;
color: #FF5E52;
background: #FFF url(16-clock.png) no-repeat left center
}
ul.todo del{
display: block;
margin-left: -20px;
padding-left: 20px;
background: #FFF url(16-em-check.png) no-repeat left center;
color: #C0DE69;
text-decoration: none
}
In conclusione, merita la segnalazione il sito da cui ho preso le icone, ovvero Sweetie icons.
