Saturday, July 14, 2007

Add web 2.0 like refelections to your images with javascript

Do you always fancy those web 2.0 like reflections to the images, which fade into background. But what if you didn't know the use of photoshop or gimp, and didn't have enough time and pateience to learn that.

No issues. Follow this procedure to add reflections to any image on your web page.

1. Go to this cool website.

2. Download the zipped file "reflection".

3. Unzip it and recover the reflection.js file.

4. Load it to your template. For it, you have to upload it to a free file hosting site, and note its URL there.

5. Paste the following code to the template. Before pasting remember to replace the src value with the URL noted in step 4 above.

6. Now you are ready to add reflections to the images. For it, just add a class="reflect" to the image.

7. You can easily change the height and opacity of the refelction if you so desire.