sprite horizontal à partir d'une image verticale

**laurentSc** · 16/04/2021, 19h38

Bonjour,
je souhaite réaliser un sprite à partir de l'image jointe (l'original fait 512px x 512px).
La petite difficulté, c'est que je souhaite "isoler" chaque feu, donc faire 3 images disposées verticalement mais les afficher horizontalement.

Voici mon code.

Code html :

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
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <ul class="icone">
        <li class="icone-1"></li>
        <li class="icone-2"></li>
        <li class="icone-3"></li>
 
    </ul>
    </body>
    </html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/* Cibler les éléments <li> appartenant à un élément de classe "icone" */
.icone li
{
    width: 512px;
    height: 200px;
    display: inline;/* pour afficher chaque image sur une ligne horizontale */
    background: url("mon_image.png") no-repeat;
}
 
.icone-1 { background-position: left top; }
.icone-2 { background-position: left -20%; }/*les décalages sont mis au pif */
.icone-3 { background-position: left -40%; }

**ProgElecT** · 16/04/2021, 21h17

Salut

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.rotation {
  transform: rotate(90deg)
}

**laurentSc** · 16/04/2021, 22h33

Encore page blanche

avec

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
/* Cibler les éléments <li> appartenant à un élément de classe "icone" */
 
.icone li
{
    width: 512px;
    height: 200px;
    display: inline; /* pour afficher chaque image sur une ligne horizontale */
    background: url("mon-image.png") no-repeat;
    transform: rotate(90deg);
}
 
.icone-1 { background-position: left top; }
.icone-2 { background-position: left -20%; }/*les décalages sont mis au pif */
.icone-3 { background-position: left -40%; }
 
.rotation {
    transform: rotate(90deg)
}

Mais peux-tu m'expliquer l'idée car ce que je comprends, c'est que chaque image (qui devrait être alignée horizontalement à l'aide de display: inline;) serait en plus pivotée de 90 degrés. C'est clair que ce n'est pas l'idée, mais c'est ma compréhension...

**NoSmoking** · 17/04/2021, 10h18

Bonjour,

Envoyé par laurentSc

Encore page blanche

! Important : les éléments inline ignorent les propriétés width et height.

Il te faut donc au moins mettre tes éléments <li> en inline-block ou passer ton élément en display:flex, tu devrais voir apparaître des choses.

Concernant l'utilisation de background-position, tu peux simplement utiliser les mots clé top, center, bottom attendu que tu as trois cas.

/*les décalages sont mis au pif */

C'est justement le soucis, lorsque l'on utilise des valeurs en pourcentage, celles-ci sont relatives au conteneur, donc les valeurs négatives « poussent » le background vers le bas.

**laurentSc** · 17/04/2021, 11h39

Tes remarques me semblent bonnes.

Mon nouveau CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/* Cibler les éléments <li> appartenant à un élément de classe "icone" */
.icone li
{
    width: 512px;
    height: 200px;
    display: inline-flex;/* pour afficher chaque image sur une ligne horizontale */
    background: url("mon-image.png") no-repeat;
}
 
.icone-1 { background-position: center top; } /* center à l'horizontal pour être plus sûr de voir qqchose */
.icone-2 { background-position: center center; }
.icone-3 { background-position: center bottom; }

encore page blanche...
Pour le display, j'ai aussi essayé inline-block et flex.

**laurentSc** · 17/04/2021, 12h09

Si tu as un exemple fonctionnel sous la main, il me paraît bien de m'en inspirer...(évidemment, j'ai cherché sur la toile mais rien trouvé).

sprite horizontal à partir d'une image verticale

CSS

Vue hybride

Discussions similaires

Partager

Partager