Bonjour,

Pour afficher une boule de loto j'utilise le code suivant :

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.grille{
    font-family: Grobold, serif;
    display: inline-block;
    height:1.54em;
    width:1.54em;
    margin:3px;
    line-height: 1.54em;
    text-align: center;
    text-transform: none;
    font-style: normal;
    /*font-weight: bold;*/
    border-radius: 50%;
    color:white;
    position: relative;
    box-shadow: -0.5em -0.5em 2em -1em #000 inset, 0.5em 0.5em 2em -1em red inset;
    cursor:pointer;
 
    transform-origin: center center;
    transition: transform 0.15s linear;
    vertical-align: middle;
    font-size:2.5em;
}

Comment modifier cette classe pour avoir le résultat suivant :

Nom : grille1.png
Affichages : 43
Taille : 75,0 Ko

Et le résultat suivant quand les numéros sont sélectionnés :

Nom : grille2.png
Affichages : 36
Taille : 77,9 Ko

On ajoute la classe ci-dessous sur les boules de loto qui sont sélectionnés :

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
.blue {
    box-shadow: 0 0 1em -0.25em #000 inset, 0 0 0.25em red #000;
    transform: scale(1.1);
    box-sizing: border-box;
    color:#000;
}

Le visuel actuel est le suivant sur ma grille de loto :

Nom : grille3.png
Affichages : 39
Taille : 104,0 Ko