Tutorial ReflectOMatic, ajouter facilement des effets de réflections
ReflectOMatic est un site qui permet d’ajouter facilement des effets de réflections à n’importe quelle image. Vous entrez l’Url de l’image, réglez l’opacité et la hauteur du reflet, la taille et la couleur de fond de l’image, une fois le résultat gêner il ne vous reste plus qu’a l’enregistrer.
Mais ce n’est tout, ReflectOMatic nous offre une autre solution basée sur un script JS pour ajouter un reflet de façon automatique sur les images de votre choix, et le fichier JavaScript ne pèse que 5 ko !
Premier partie :
Téléchargez et placez le fichier reflection.js dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </head>
<script type="text/javascript" src="reflection.js"></script>
Faites attention au paramètre “src” qui indique l’emplacement du script
Deuxième partie :
Ajouter ensuite une classe reflect sur votre image
<img src="image.jpg" class="reflect" alt="" />
Option :
Vous pouvez paramétrer la hauteur et l’opacité du reflet :
<img src="image.jpg" class="reflect ropacity10" alt="" /> <img src="image.jpg" class="reflect ropacity50" alt="" />
<img src="image.jpg" class="reflect rheight40" alt="" /> <img src="image.jpg" class="reflect rheight80" alt="" />
Pour finir, vous disposez même de plugin pour la plupart des plate-forme, je vous renvoi sur le site pour plus d’information
Ce script fonctionne théoriquement sur la plupart des navigateurs (IE, Firefox, Opera, Safari).
2 commentaires, commentaire ou Trackback
Kval
Superbe effet !
Très réussi et simple à mettre en place!
Mon seul problème pour le moment c’est que l’effet ne s’adapte pas entièrement à mon image: il est plus LARGE qu’elle.
23 avril 2008
MedBlog
@kval : indique moi juste l’URL de la page, je veux voir ce que je peux faire !!
24 avril 2008
Répondre á “Tutorial ReflectOMatic, ajouter facilement des effets de réflections”