MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

Tutorial ReflectOMatic, ajouter facilement des effets de réflections

reflectomatic
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).

AddThis Social Bookmark Button

2 commentaires, commentaire ou Trackback

  1. 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.

  2. @kval : indique moi juste l’URL de la page, je veux voir ce que je peux faire !!

Répondre á “Tutorial ReflectOMatic, ajouter facilement des effets de réflections”

Recevez les derniers articles par mail :

 

Recent Comments

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris