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 :
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/* [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); } |