Un effet reflet pour vos images et vos photos - sans logiciel d'édition !
04-10-2006 » un com
|
|
C'est désormais possible avec Javascript Image Reflections, un fichier javascript d'à peine 5 ko couplé avec prototype.js ! Et cela fonctionne avec la majorité des navigateurs - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari.
Pour ajouter un reflet à une image, il suffit d'ajouter une classe "reflect" (class="reflect") dans la balise img :
Il est également possible de modifier les paramètres du reflet !
Par défaut,le reflet a une hauteur de 50% de l'image originale et l'opacité du reflet est de 50%.
Modifier la hauteur du reflet :
Pour faire varier la hauteur du reflet il suffit d'ajouter "rheight" suivi de la hauteur souhaitée en pourcentage.
|
|
class="reflect rheight33" |
|
|
class="reflect rheight66" |
|
|
class="reflect rheight100" |
Modifier l'opacité du reflet :
Pour faire varier l'opacité du reflet il suffit d'ajouter "ropacity" suivi de la valeur souhaitée en pourcentage.
|
|
class="reflect ropacity33" |
|
|
class="reflect ropacity66" |
|
|
class="reflect ropacity100" |
Il est possible de combiner les 2 options :
Par exemple pour créer une reflet de 80% de hauteur avec une opacité de 40% :
|
|
class="reflect rheight80 ropacity40" |
 |
Abonnez-vous au flux RSS de Webstorming pour recevoir les nouveaux billets sur votre agrégateur RSS ou directement dans votre boîte e-mail. + d'explications... |
