One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement.
Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.
Reflection.js is a JavaScript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE — if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.
The HTML
<img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />
Add the reflect CSS class to any image you'd like to reflect.
The MooTools JavaScript Usage
window.addEvent('domready',function() {
var options = { height: 0.5 };
$$('img.reflect').each(function(img) {
img.reflect(options);
});
});
The MooTools version of Reflection.js implements the reflect method to create reflections.
The jQuery JavaScript Usage
document.ready(function() {
var options = { opacity: 0.75 };
$('.reflect').reflect(options);
});
Much like MooTools method, you execute each element's reflect method.
Christophe's Reflection.js code is a great piece of work! Don't waste time making reflections in Photoshop — use the power of JavaScript!
0 comments:
Post a Comment