Hello,
suite au tuto sur Libsass (http://www.grafikart.fr/tutoriels/html-css/sass-libsass-nodejs-553), j'ai un souci de génération de sprites.
Il me fait bien les 2 mais au bout d'un moment, il me compose le sprite @2x d'une façon et l'autre d'une autre façon, si bien que ça fout en vrac mon inté (image pas à la bonne place du coup)...

vous avez rencontré le pb ?
C'est assez pénalisant comme souci.

Merci :)
Stef

5 réponses


Grafikart
Réponse acceptée

Par contre tes images "retina" ont bien des dimensions paires ?

Je pense qu'il faudrait changer la méthode de fonctionnement en générant une seule sprite, et en la divisant par 2 du coup

Tef
Auteur

Yep, pas bête ça. En gros je partirais dans mon gulpfile.js sur un simple sprite@2x.png et ensuite je lui dit de diviser en 2 via imagemagick.

Je vais partir sur ça.
Toi t'as déjà rencontré le pb ? A moins que tu n'utilises pas ça en dev.

Thx à toi.

EDIT :

Voilà ce que j'ai fais si ça peut servir. Il faut installer gulp-rename en plus.

<code>
sprite = gulp.src(path.images + 'sprite@2x.png')
.pipe(gulpLoader.imageResize({width: '50%', height: '50%', imageMagick: true}))
.pipe(gulpLoader.rename(function (varPath){varPath.basename="sprite";}))
.pipe(gulp.dest(path.images));
</code>

Par contre le pb avec cette solution c'est que les coordonnées du sprites simple sont générées à la volée. Là du coup je ne fais que réduire une image donc je ne vois pas comment reconstituer les coordonnées :(

Tef
Auteur

ha non je savais pas !

Tu as raison bon sang le pb vient peut-être de là ?
Extrait d'un article d'un site (je me permet) 24 jours du web (:
"Les demi-pixels, cela existe ?!

Le travers de la technique est que, lors de l’utilisation de CSS Sprite pour faire des « hover » ou « active », si les images ne sont pas calées sur une grille paire, vous pourriez obtenir des décalages d’un demi-pixel ! En effet, si l'image du hover n'est pas calée sur des pixels pairs, le positionnement parfait du hover en background-position est entre deux pixels (à X,5 px). À noter qu'on ne peut avoir de background-size ou background-position en X,5 px, c'est donc pour cette raison qu'il est indispensable de générer un fichier d'image en pixels pairs."

Tef
Auteur

Purée (oui je suis poli ^^) je savais pas pour le retina merci car le pb venait bien de là. J'avais 2 images aux dimensions impaires. Tout refonctionne sans mon bout de code

bien vu Graf'
Thx