Avec le nouvel objet canvas en html 5, je me disais qu’il serait surement possible de générer dynamiquement un effet de mirroir sous les images, comme ce que propose la nouvelle suite d’Apple dans Pages, Keynote et iWeb. Au gré de mes recherches dans Google pour trouver plus d’infos sur les canvas, je suis tombé sur un script déjà fait qui réalise exactement ça : reflection.js.
Il suffit d’attribuer la class « reflect » aux images pour lesquelles vous souhaitez avoir un effet de réflexion, et l’image est générée automatiquement au chargement de la page.
Evidemment, ceci ne marche qu’avec les navigateurs implémentant l’objet canvas, c’est à dire Firefox 1.5, Safari 2 et Opera preview 9.