Ajouter facilement un effet miroir ou reflet à vos images

29 mai 2009 par Chob

L’intérêt du Web 2.0 réside notamment dans la multitude de services proposés en ligne, qui permettent à des non-pros du design comme moi de donner un vernis sympa à leurs sites. Panorama des solutions en ligne pour ajouter un effet sympa (miroir ou reflet, c’est comme vous voulez) à vos images, et zoom sur les solutions WordPress.

Reflectionmarker

Simplissime pour un rendu très propre, c’est mon préféré. On peut sélectionner une photo déjà en ligne ou sur son poste, choisir la couleur du fond et la taille du reflet.

Wet Floor Maker

Plus puissant que le précédent, il est cependant plus difficile à maîtriser. Les amateurs apprécieront cependant les options proposées et le rendu spectaculaire : c’est la solution à choisir pour présenter par exemple un portfolio.

MirrorEffect

Celui-ci possède un gros défaut, il faut aller chercher le fichier de l’image à modifier à chaque essai ! Moi, ça me lasse…

Dommage, il propose une fonctionnalité intéressante que les autres n’ont pas : l’» embed code» de l’image, que l’on peut exporter directement vers des plateformes de blog (WP, Blogger et autres) ou des réseaux communautaires (Facebook, Orkut…)

Et pour WordPress alors ?

Je suis encore débutant sur WordPress que j’utilise pour la première fois à l’occasion de ce blog, mais je me suis dit qu’un plug-in devait exister. Gagné ! … ou presque. Il existe pourtant un plug-in WordPress : WP Wetfloor. Le problème, c’est qu’il déclenche une erreur fatale quand j’essaie de l’installer sur la version française de Wordpress alors que je l’installe sans problème sur la version anglaise ! Si quelqu’un peut me dire pourquoi…

Ma solution, qui n’est certainement pas la meilleure mais elle fonctionne :

1. Ajouter le script

Télécharger le fichier reflection.js (la dernière version sur ce site)
Le poser sur votre FTP
Ajouter un lien vers ce même fichier dans le <head> de votre page (header.php)

Plus facile, utiliser la solution proposée par CreaWeb qui vous propose d’ajouter directement la ligne de code dans votre page header.php

2. Ajouter le code CSS pour donner l’effet miroir à vos images

On peut bien sûr choisir l’opacité et la taille du reflet, j’ai choisi 80 et 33.

Aller plus loin

J’ai découvert par CreaWeb cet exellent site de Netzgesta qui donne toute une série de scripts topissimes, mais plus délicats à utiliser pour des néophytes comme moi !