sprite – devfrontend.info

Attention, sous Chrome il semble que le SPAN imbriqué (il contient nativement l’effet d’ombre appliqué au caractère issu de la police d’icônes – et duquel on se sert pour appliquer certaines propriétés CSS) soit supprimé par le parseur HTML !!! A rajouter en dur dans le template du bloc :

<span>&nbsp;</span>

1	<span> </span>

Avertissement : ce procédé est sale et ne vient en aucun cas enrichir des fonctionnalités existantes de WordPress.

Le code CSS ci-dessous apparaît en surcharge du code fourni par le plug-in. Sa présence empêchera l’utilisation native de Quickfinder sur les élements auxquels il sera appliqué.

Dans l’interface d’administration, ne charger aucune image et n’assigner aucune icône par shortcode.

Cette technique ne donne pas de bons résultats avec des pngs transparents. Pensez à mettre un fond de couleur en rapport avec votre fond de page dans vos sprites.

Le markup HTML et le code Javascript restent inchangés.

/*
	[Wordpress] Utiliser des sprites CSS avec le plug-in Quickfinder de Wordpress pour obtenir un effet d'images survolées
    (demo Quickfinder: http://codex-themes.com/codeus/)
	Astuce inspirée de: http://css3.bradshawenterprises.com/cfimg/
*/
.home .quickfinder ul li .image,
.home .quickfinder ul li .image span{
	/* border-radius n'affiche pas des contours de cercle suffisamment clean avec des images superposées */
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	-ms-border-radius: 0px;
	border-radius: 0px;
	background-repeat: no-repeat;
    background-color: transparent !important;
	/* largeur et moitié de la hauteur (si sprite) des images source */
	width: 171px;
	height: 171px;
}

.home .quickfinder ul li .image{
	z-index: 2;
	background-position: bottom left;
}

.home .quickfinder ul li .image span{
	position: absolute;
	z-index: 1;
	top: -1px;
	left: 0;
	background-position: top left;	
}

.home .quickfinder ul li span{
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.home .quickfinder ul li .image:hover span{
	opacity: 0;
}

/* on cible le <li> par son positionnement dans la liste (nth-child:(x)) */
.home .quickfinder ul li:nth-child(1) .image,
.home .quickfinder ul li:nth-child(1) .image span{
	background-image: url(http://cmlien.free.fr/qf_sprite-01.png);
}

.home .quickfinder ul li:nth-child(2) .image,
.home .quickfinder ul li:nth-child(2) .image span{
	background-image: url(http://cmlien.free.fr/qf_sprite-02.png);
}

.home .quickfinder ul li:nth-child(3) .image,
.home .quickfinder ul li:nth-child(3) .image span{
	background-image: url(http://cmlien.free.fr/qf_sprite-03.png);
}

.home .quickfinder ul li:nth-child(4) .image,
.home .quickfinder ul li:nth-child(4) .image span{
	background-image: url(http://cmlien.free.fr/qf_sprite-04.png);
}

[Wordpress] Utiliser des sprites CSS avec le plug-in Quickfinder de Wordpress pour obtenir un effet d'images survolées

(demo Quickfinder: http://codex-themes.com/codeus/)

Astuce inspirée de: http://css3.bradshawenterprises.com/cfimg/

.home .quickfinder ul li .image,

.home .quickfinder ul li .image span{

/* border-radius n'affiche pas des contours de cercle suffisamment clean avec des images superposées */

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-o-border-radius: 0px;

-ms-border-radius: 0px;

border-radius: 0px;

background-repeat: no-repeat;

background-color: transparent !important;

/* largeur et moitié de la hauteur (si sprite) des images source */

width: 171px;

height: 171px;

}

.home .quickfinder ul li .image{

z-index: 2;

background-position: bottom left;

}

.home .quickfinder ul li .image span{

position: absolute;

z-index: 1;

top: -1px;

left: 0;

background-position: top left;

}

.home .quickfinder ul li span{

-webkit-transition: opacity 0.2s ease-in-out;

-moz-transition: opacity 0.2s ease-in-out;

-o-transition: opacity 0.2s ease-in-out;

transition: opacity 0.2s ease-in-out;

}

.home .quickfinder ul li .image:hover span{

opacity: 0;

}

/* on cible le <li> par son positionnement dans la liste (nth-child:(x)) */

.home .quickfinder ul li:nth-child(1) .image,

.home .quickfinder ul li:nth-child(1) .image span{

}

.home .quickfinder ul li:nth-child(2) .image,

.home .quickfinder ul li:nth-child(2) .image span{

}

.home .quickfinder ul li:nth-child(3) .image,

.home .quickfinder ul li:nth-child(3) .image span{

}

.home .quickfinder ul li:nth-child(4) .image,

.home .quickfinder ul li:nth-child(4) .image span{

}

Outil de conversion image vers SVG : Online CSS Sprite Generator (output base64 in CSS)

Simulation : http://jsfiddle.net/frontenddeveloper/fL4nB/

Source partielle du texte ci-dessous : http://www.johanbleuzen.fr/blog/encoder-images-base64-css

Le gain en nombre de requête peut être intéressant si l’on a beaucoup de petites images et reste pour moins le principal attrait de cette technique. Je l’utilise pour mes images de fonds dans le design de ce blog.

Avantages :

Diminution du nombre des requêtes HTTP,
Solution adaptée aux petites images,
Les images tirent partie du GZip puisqu’elles sont encodées au format texte,
Pas de markup HTML supplémentaire pour afficher des icônes dans vos pages (exit les <i class="mon-icone"></i>),
Positionnement au pixel près dans les blocs avec CSS, repeat-x et y possible, background-multiple possible (voir ma simulation).

Inconvénients :

Le fichier CSS est plus lourd,
A chaque modification d’une image il faudra mettre à jour le fichier CSS,
N’est pas supporté par IE6 et IE7 (mouarf !), mais les icônes et autres pictogrammes qui feraient l’objet d’une conversion en Base64 utilisent souvent la transparence PNG qui n’est pas plus prise en charge par ces navigateurs préhistoriques…

Et pour la forme voici, quelques petits conseils qui peuvent être intéressant de rappeler si vous voulez gagner quelques précieux kilo-octets :

Utilisez cette image pour des images que l’on ne modifie pas souvent
Optimisez vos images avec Smushit (par exemple) avant l’encodage en base64
Les images ne doivent pas dépasser 3 kilo-octets
Placez les attributs CSS en début de fichiers pour que l’affichage soit le plus rapide possible

Articles récents

Catégories

Archives

Méta

Étiquette : sprite

[WordPress] Utiliser des sprites CSS avec le plug-in Quickfinder de WordPress pour obtenir un effet d’images survolées

[CSS Sprites] Encoder des images en Base64 dans ses CSS