Image reflection the easy way!

After seeing the nice new reflection effects in some wpf/e examples from Microsoft and other sites that use reflection in their logo. I wanted to start using them on images in my sites. I started by opening photoshop and making the reflection part of the image, then thought there must be an easier and quicker way of doing this.

Well there is...

I came across this site, http://cow.neondragon.net/stuff/reflection/ , which achieves the same result using a small javascript file. Include that on the page then all you need to do is add class="reflect" to the image and you're good to go.

You can change the height of the reflection by adding rheight50 after the reflect ie.

<img src="..." class="reflect rheight50" /> 

Just increase of decrease the number to change the height.

Same thing if you want to change the opacity of the reflection too:

<img src="..." class="reflect ropacity20" /> 

Again, change the number to increase or decrease the opacity.

There are more details in the download, along with full examples. Thats all there is too it. Simple but effective.

Author Andrew Clark

Web Application Developer

Add Comment

Name
Comment
 

Your comment has been received and will be shown once it passes moderation.