Tonio™ Blog: avril 2012

jQuery dice plugin is a jQuery plugin that ease the inclusion of dice inside your jQuery-based website. It is based on CSS3 and Javascript and allow you to draw 2D dice of any size without using any image.

dice build using jQuery dice plugin

>> project page on GitHub <<

How to use

Include both the css and the javascript plugin into your html page :

You can then turn any <DIV> into a die by calling the dice function :

$("#die").dice({
    size: 100, // in pixels
    val: 3, // 1, 2, 3, 4, 5, 6
    rotation: 0 // O to 359 deg
});

The dice function accepts three options :

size :: The dimensions of the die in pixels (height and width are equals); default : 100px
val :: The face of the die (1, 2, 3, 4, 5 or 6); default : random
rotation :: The rotation of the die in degrees. The anchor point is the middle of the die.; default : 0

Test it with the jQuery mobile demo page bellow :

demo page source code

Only the following browser are supported yet :

Firefox
Chrome (including Android 2.3+)
Safari (including iPhone and iPad)

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 :

Une ombre interne pour simuler l'arrondi des arrêtes du dé qui délimitent la face du dé.
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>

Tonio™ Blog

vendredi 13 avril 2012

Introducing jQuery dice plugin

How to use

jeudi 5 avril 2012

De jolis dés en CSS3 et HTML

Structure HTML d'une face

Styles appliqués