De jolis dés en CSS3 et HTML

Grâce au CSS3, il est maintenant possible d'utiliser des effets avancés permettant de réaliser des mises en pages HTML poussées qui soient scalables et qui ne nécessitent plus de connaitre en profondeur Photoshop, Illustrator et autres Gimp, ... La seule limite reste votre créativité et votre imagination. Pour les stimuler un peu, voici comment réaliser simplement les six faces d'un dé en HTML et CSS3 :

Dés en CSS3 et HTML

Structure HTML d'une face

Prenons l'exemple du six. Pour composer cette face du dé, nous utilisons le markup HTML suivant :

<div class="dice-container">
    <div class="dice dice-6">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
        <div class="dice-indicator indicator-5"></div>
        <div class="dice-indicator indicator-6"></div>
    </div>
</div>

Un conteneur pour le dé

Ce DIV sera utilisé pour appliquer la projection de l'ombre du dé sur la surface.

Un conteneur pour la face du dé

Ce DIV sera utilisé pour appliquer le dégradé de lumière relatifs à la face visible du dé.

Un conteneur par indicateur

Ce DIV sera utilisé pour chaque rond noir servant à indiquer la valeur de la face du dé. Un reflet plastique blanc lui sera appliqué afin de simuler une impression de creux dans la face du dé.

Styles appliqués

Pour simplifier la lecture des styles ci dessous, seules les compatibilités Firefox et Webkit ont été conservées. Pour une compatibilité étendue aux autres navigateurs : internet explorer 9 et opéra, il faut adapter les -webkit et -moz à leurs équivalents -ie pour internet explorer et -o pour opéra.

Dans un premier temps, nous allons appliquer au conteneur du dé, une ombre projetée :

div.dice-container {
    color: white;
    height: 100px;
    width: 100px;
    border: none;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    box-shadow: -1px 1px 5px #888888;
    -webkit-box-shadow: -1px 1px 5px #888888;
}

ombre projetée du dé

Puis il faut appliquer à la face du dé deux effets distincts :

1. Une ombre interne pour simuler l'arrondi des arrêtes du dé qui délimitent la face du dé.
2. Une ombre radial pour simuler un effet de reflet de la lumière à la surface de la face du dé.

div.dice {
    color: white;
    height: 100px;
    width: 100px;
    border: none;
    border-radius:15px;
    -webkit-border-radius:15px;
    background: -moz-radial-gradient(right top, circle, #FFFFFF, #F6F6F6);
    background: -webkit-radial-gradient(right top, circle, #FFFFFF, #F6F6F6);
    -webkit-box-shadow: inset 2px -2px 3px 3px #EEEEEE;
    box-shadow: inset 2px -2px 3px 3px #EEEEEE;
}

Arrondi de la face du dé et reflet

L'étape suivante consiste à créer un rond noir donnant l'impression d'être creusé dans la face du dé. Pour cela, on utilise un gradient radial que l'on décale vers le bord inférieur gauche du rond noir :

div.dice div.dice-indicator {
    width: 18px;
    height: 18px;
    -webkit-box-shadow: inset 0 0 1px 1px #111111;
    box-shadow: inset 0 0 1px 1px #111111;
    background: -moz-radial-gradient(left bottom, circle, #FFFFFF, #000000, #000000); 
    background: -webkit-radial-gradient(left bottom, circle, #FFFFFF, #000000, #000000);
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    position: relative;
}

rond noir incurvé

Pour terminer, il ne reste plus qu'à positionner les ronds noirs sur la face du dé selon la valeur souhaitée :

div.dice-1 div.indicator-1, div.dice-5 div.indicator-1, div.dice-3 div.indicator-1 {
    top: 41px; /* 41 */
    left: 41px; /* 41 */
}

div.dice-5 div.indicator-2, div.dice-3 div.indicator-2 {
    top: -2px; /* 16 */
    left: 16px; /* 16 */
}

div.dice-5 div.indicator-3 {
    top: -20px; /* 16 */
    left: 66px; /* 66 */
}

div.dice-5 div.indicator-4 {
    top: 12px; /* 66 */
    left: 16px; /* 16 */
}

div.dice-5 div.indicator-5 {
    top: -6px; /* 66 */
    left: 66px; /* 66 */
}

div.dice-2 div.indicator-1, div.dice-4 div.indicator-1 {
    top: 16px; /* 16 */
    left: 16px; /* 16 */
}

div.dice-2 div.indicator-2, div.dice-4 div.indicator-2 {
    top: 48px; /* 66 */
    left: 66px; /* 66 */
}

div.dice-3 div.indicator-3 {
    top: 32px; /* 66 */
    left: 66px; /* 66 */
}

div.dice-4 div.indicator-3 {
    top: -20px; /* 16 */
    left: 66px; /* 66 */
}

div.dice-4 div.indicator-4 {
    top: 12px; /* 66 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-1 {
    top: 16px; /* 16 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-2 {
    top: 23px; /* 41 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-3 {
    top: 30px; /* 66 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-4 {
    top: -38px; /* 16 */
    left: 66px; /* 66 */
}

div.dice-6 div.indicator-5 {
    top: -31px; /* 41 */
    left: 66px; /* 66 */
}

div.dice-6 div.indicator-6 {
    top: -24px; /* 66 */
    left: 66px; /* 66 */
}

Les dés peuvent alors être directement ajoutés au code HTML de la page au moyen du code suivant :

<div class="dice-container">
    <div class="dice dice-1">
        <div class="dice-indicator indicator-1"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-2">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-3">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-4">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-5">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
        <div class="dice-indicator indicator-5"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-6">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
        <div class="dice-indicator indicator-5"></div>
        <div class="dice-indicator indicator-6"></div>
    </div>
</div>