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é).

**laurentSc** · 17/04/2021, 15h11

En fait, je m'étais trompé et l'image n'était pas présente !

Maintenant, je vois quelque chose, mais pas ce que je souhaite...

D'abord, pour tout voir sur une seule ligne, j'ai réduit les dimensions de l'image : 200px x 200px.

Pour que les images soient à l'horizontal, mais pas à la vertical , il ne faut pas display:flex mais display:inline-flex.

Le problème qui reste est que c'est toujours le feu rouge qui apparaît. Pas moyen de faire apparaître les feux orange et vert. Comment faire STP ?

Mon CSS actuel :

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:200px;
    height:70px;
    display:inline-flex;/* pour afficher chaque image sur une ligne horizontale */
    background:url("mon-image3.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; }

Le html est toujours celui du post #1.

**mathieu** · 17/04/2021, 16h57

le sélecteur .icone li à un priorité supérieure à .icone-r donc c'est la propriété "background" qui écrase la valeur de "background-position".
https://dmouronval.developpez.com/tu...e-specificite/

pour régler ça au niveaux des priorités, vous pouvez faire cela par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.icone .icone-r
{
    background-position : center top;
}
.icone .icone-o
{
    background-position : center center;
}
.icone .icone-v
{
    background-position : center bottom;
}

**laurentSc** · 17/04/2021, 18h05

Bon, pas la peine que je mette cet article dans mes favoris car dans 5 minutes, j'aurai oublié que je l'ai fait

.

Mais c'était effectivement ça.

**NoSmoking** · 17/04/2021, 19h02

Envoyé par laurentSc

Pour que les images soient à l'horizontal, mais pas à la vertical , il ne faut pas display:flex mais display:inline-flex.

il y avait quelque chose qui devait gêner l'affichage car par défaut flex est en flex-direction:row.

Envoyé par mathieu

le sélecteur .icone li à un priorité supérieure à .icone-r donc c'est la propriété "background" qui écrase la valeur de "background-position".

Oui mais une bonne solution n'est pas de surcharger le sélecteur, mais d'alléger la propriété et donc ne pas utiliser la propriété raccourcie.
Avec la propriété raccourcie les valeurs absentes sont réinitialisées avec les valeurs par défaut initiales.

Tu pourrais donc également mettre juste

Code :

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

1
2
3
4
5
6
7
8
9
10
.icone li {
    width: 200px;
    height: 70px;
    display: inline-flex;
    background-image: url("mon-image3.png");
    background-repeat:  no-repeat;
}
.icone-1 { background-position: center top; }
.icone-2 { background-position: center center; }
.icone-3 { background-position: center bottom; }

Envoyé par laurentSc

Si tu as un exemple fonctionnel sous la main, ...

A regarder : Horloge digitale, version sprite vertical.

**laurentSc** · 17/04/2021, 21h29

Je confirme. Le CSS de NoSmoking marche très bien.

Sinon, bien content de m'en être sorti sans ton exemple : il est 50 fois plus compliqué que mon code

et y a même un script en javascript...

**NoSmoking** · 18/04/2021, 09h23

Envoyé par laurentSc

Sinon, bien content de m'en être sorti sans ton exemple : il est 50 fois plus compliqué que mon code

...

regarde le CSS concerné et compare, je te le mets ci-dessous :

Code :

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
[class^="clock_"] {
  width: 38px;                              /* les dimensions sont à ajuster  */
  height: 52px;                             /* fonction de l'image utilisée   */
 
  background-image: url(images/chiffres-rouge-v.png);
  background-position: 0 100%;              /* position par défaut sur le séparateur */
  background-repeat: no-repeat;
  background-size: 100% 1100%;              /* hauteur 11 x 100% */
}
/* décalage des background en y */
.clock_0 { background-position: 0  0%;}
.clock_1 { background-position: 0 10%;}
.clock_2 { background-position: 0 20%;}
.clock_3 { background-position: 0 30%;}
.clock_4 { background-position: 0 40%;}
.clock_5 { background-position: 0 50%;}
.clock_6 { background-position: 0 60%;}
.clock_7 { background-position: 0 70%;}
.clock_8 { background-position: 0 80%;}
.clock_9 { background-position: 0 90%;}

... il y a plus d’éléments mais le principe et le code est identique à l'exception des dimensions de l'image en background qui sont exprimées en pourcentage ce qui offre plus de souplesse.

... et y a même un script en javascript...

il n'est pas à prendre en compte dans le cas qui intéresse cette discussion.

**laurentSc** · 18/04/2021, 10h48

Envoyé par NoSmoking

il n'est pas à prendre en compte dans le cas qui intéresse cette discussion.

OK, mais il m'a fait peur, vu que je ne le savais pas.

Petite question sur le CSS. [class^="clock_"]. Tu peux décortiquer ? Ce qui m'échappe : le ^ , les guillemets et le _ .

D'autre part, la création des <span>, elle est bien faite dans le js, non ?

Code js :

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

1
2
3
4
5
6
7
/ rajout de 8 <span> dans la <div id="clock">
const elClock = document.getElementById("clock");
for (let ind = 0; ind < tabValeurs.length; ind += 1) {
  tabSpans.push(document.createElement("SPAN"));
 
// ajout de l'ensemble des <span>
elClock.append(...tabSpans);

**NoSmoking** · 20/04/2021, 08h57

Petite question sur le CSS. [class^="clock_"]. Tu peux décortiquer ? Ce qui m'échappe : le ^ , les guillemets et le _ .

Il s'agit d'un sélecteur d'attribut, celui-ci est reconnaissable grâce son crochet ouvrant et fermant. L'attribut ciblé dans le cas présent est class.

• L'opérateur ^= permet de cibler un élément dont la valeur de l'attribut commence par ce qui suit le signe égal.

Pour prendre ton exemple :

Code :

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

1
2
3
[class^="icone-"] {
  /* les déclarations */
}

serait équivalent à :

Code :

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

1
2
3
4
5
.icone-1,
.icone-1,
.icone-3 {
  /* les déclarations */
}

... ces trois classes commençant par "icone-".

Ce sélecteur n'est pas réputé pour être performant mais n'apporte pas de spécificité (poids) supplémentaire.

• Les guillemets encadre simplement la valeur recherchée, cela peut marcher également sans mais pas dans tous les cas.

• Le _ n'est rien d'autre qu'un caractère comme un autre.

D'autre part, la création des <span>, elle est bien faite dans le js, non ?

Oui, comme on doit récupérer les références à ces éléments autant tout faire en JavaScript.

**laurentSc** · 20/04/2021, 09h36

Merci pour ces explications claires. Tu en rajoutes même une sur le sélecteur d'attribut, fort utile, que je n'avais même pas mentionnée...

Mais je rajoute cette remarque : même si sur le coup (quand je te lis), je comprends, il est probable que je vais oublier (même de l'avoir déjà vu !). En effet, depuis mon traumatisme crânien (en 2000 !), j'ai une très mauvaise mémoire. Pour compenser, plusieurs moyens :
- la concentration (j'ai commencé le développement web en 2006, donc tout ce que je connais en html, css, js, php, sql, etc date d'après)
- je note beaucoup (la difficulté est de se souvenir que c'est noté et où !)

sprite horizontal à partir d'une image verticale

CSS

Discussions similaires

Partager

Partager