Ajoutez du style à vos listes ordonnées

Image non disponible

Ajouter des styles à des listes ordonnées a longtemps été une tâche difficile et piégeuse, je ne suis pas le seul à le penser. Pour donner un style aux nombres, vous devez d'abord supprimer le style par défaut du navigateur puis ajuster le code des éléments de la liste afin de leur donner le style approprié.

Dans cet article, je vais vous montrer comment utiliser CSS3 pour améliorer la présentation de vos listes ordonnées en utilisant une approche sémantique.

Cet article est la traduction de CSS3 ordered list styles publié sur Red Team Design.

2 commentaires Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

L'idée

Image non disponible

Lorsque j'ai lu pour la première fois l'article de Roger Johansson sur les styles des listes ordonnées, je dois avouer que j'ai tout de suite aimé sa technique. Je vais essayer de l'utiliser et de l'améliorer un petit peu pour vous montrer différentes façons de mettre en forme vos listes ordonnées.

Vous pouvez déjà voir un exemple en ligne.

Le HTML

Le balisage utilisé est tout ce qu'il y a de plus classique :

 
Sélectionnez

<ol class="rounded-list">
        <li><a href="">List item</a></li>
        <li><a href="">List item</a></li>
        <li><a href="">List item</a>
                <ol>
                        <li><a href="">List sub item</a></li>
                        <li><a href="">List sub item</a></li>
                        <li><a href="">List sub item</a></li>
                </ol>
        </li>
        <li><a href="">List item</a></li>
        <li><a href="">List item</a></li>
</ol>

Le CSS

Essayons d'expliquer simplement comment cela fonctionne.

Nous allons utiliser le contenu généré, la numérotation automatique et les listes. Il s'agit essentiellement d'utiliser deux propriétés CSS2.1 : counter-reset (initialise un compteur) et counter-increment (le nom est explicite, cela incrémente le compteur précédent). Comme vous le verrez dans le code ci-dessous, counter-increment sera utilisé en relation avec du contenu généré CSS (pseudoéléments).

 
Sélectionnez

ol{
        counter-reset: li; /* Initialise le compteur */
        list-style: none; /* Supprime la numérotation par défaut */
        *list-style: decimal; /* Restitue la numérotation par défaut pour IE6/7 */
        font: 15px 'trebuchet MS', 'lucida sans';
        padding: 0;
        margin-bottom: 4em;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
        margin: 0 0 0 2em; /* Ajoute une marge à gauche pour les listes imbriquées */
}

Numérotation arrondie

Image non disponible
 
Sélectionnez

.rounded-list a{
        position: relative;
        display: block;
        padding: .4em .4em .4em 2em;
        *padding: .4em;
        margin: .5em 0;
        background: #ddd;
        color: #444;
        text-decoration: none;
        border-radius: .3em;
        transition: all .3s ease-out;
}

.rounded-list a:hover{
        background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);
}

.rounded-list a:before{
        content: counter(li);
        counter-increment: li;
        position: absolute;
        left: -1.3em;
        top: 50%;
        margin-top: -1.3em;
        background: #87ceeb;
        height: 2em;
        width: 2em;
        line-height: 2em;
        border: .3em solid #fff;
        text-align: center;
        font-weight: bold;
        border-radius: 2em;
        transition: all .3s ease-out;
}

Numérotation rectangulaire

Image non disponible
 
Sélectionnez

.rectangle-list a{
        position: relative;
        display: block;
        padding: .4em .4em .4em .8em;
        *padding: .4em;
        margin: .5em 0 .5em 2.5em;
        background: #ddd;
        color: #444;
        text-decoration: none;
        transition: all .3s ease-out;
}

.rectangle-list a:hover{
        background: #eee;
}       

.rectangle-list a:before{
        content: counter(li);
        counter-increment: li;
        position: absolute;
        left: -2.5em;
        top: 50%;
        margin-top: -1em;
        background: #fa8072;
        height: 2em;
        width: 2em;
        line-height: 2em;
        text-align: center;
        font-weight: bold;
}

.rectangle-list a:after{
        position: absolute;
        content: '';
        border: .5em solid transparent;
        left: -1em;
        top: 50%;
        margin-top: -.5em;
        transition: all .3s ease-out;
}

.rectangle-list a:hover:after{
        left: -.5em;
        border-left-color: #fa8072;
}

Numérotation cerclée

Image non disponible
 
Sélectionnez

.circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
}

.circle-list h2{
    position: relative;
    margin: 0;
}

.circle-list p{
    margin: 0;
}

.circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;
}

.circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
}

En guise de bonus

Des animations de la numérotation ont été ajoutées au survol dans la démo. Malheureusement, il semble qu'actuellement, seul Firefox permet d'animer des pseudoéléments. Espérons que cela se généralisera bientôt.

Support des navigateurs

Conclusion et remerciements

Merci d'avoir lu cet article. J'espère que vous l'avez apprécié. N'hésitez pas à faire part de vos commentaires (NDT : y compris sur le site de l'article original).

Cet article a été publié avec l'aimable autorisation de Catalin Rosu. L'article original peut être lu sur le site de Red Team Design : CSS3 ordered list styles.

Nous tenons aussi à remercier ClaudeLELOUP et FirePrawn pour leur relecture attentive de cet article.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Red Team Design. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.