Je fais à nouveau mumuse avec les techniques utilisées pour looker ce blog.
Les arrivées récentes de Firefox4 et de IE9 m'ont fait replonger dans les feuilles de style (CSS2.1 et CSS3) et je suis en train de simplifier la gestion des ombres sous les photos.
J'utilisais jusqu'à présent une méthode tarabiscotée (j'aime compliquer ce qui peut rester simple) avec des images de fond aux bords plus ou moins transparents. Chaque format de photo demandant une image adaptée à sa taille et des rajouts dans le codage html de chaque billet. Efficace mais pas très souple.
Je me suis enfin décidé à passer par box-shadow avec un truc du genre...
img{ -moz-box-shadow: 5px 5px 15px 0px #000000; -webkit-box-shadow: 5px 5px 15px 0px #000000; -khtml-box-shadow: 5px 5px 15px 0px #000000; box-shadow: 5px 5px 15px 0px #000000; }
pouvant être annulé par...
img.smiley{ -moz-box-shadow: 0 0 0 0; -webkit-box-shadow: 0 0 0 0; -khtml-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; }
Les -moz-box-shadow, -webkit-box-shadow et -khtml-box-shadow sont là pour la compatibilité avec des navigateurs moins récents. La lecture de cette page (en anglais) donne pas mal d'informations tant du côté paramétrage que du côté support par les navigateurs selon leur version...
L'ombre est dessinée à présent par le navigateur, automatiquement en fonction de la hauteur et largeur de la photo. Plus besoin de télécharger des images de fond aux formats fixes et imposés, simplification lors du codage des billets.
Ce que je ne comprends pas, c'est pourquoi je n'y ai pas pensé plutôt !...
1. par Tomek, le vendredi 25 mars 2011 à 09h07 commentaire
faute de compatibilité avec d'anciens navigateurs peut-être ? (bien qu'il existe des bidouilles pour y palier...)
2. par Cunégonde, le vendredi 25 mars 2011 à 17h16 commentaire
C'est vrai ça pourquoi ne pas y avoir pensé plutôt, quand même!!