Text reflections with css and javascript: jQuery text reflection plugin

If you want to create a reflected text header, an often used solution is to dynamically create an image for each header which includes the reflection. However, this has some disadvantages. Therefore, I have created a jQuery plugin which uses only javascript and css to create reflections, and all you have to do is drop it into your page to make it work.

You can see the plugin in action on the <h2>‘s on this very page.

Problems with image-based solutions

Using images for your headers has a few disadvantages:

• It makes your page load slower (because every header requires its own http request)
• If you want to define or change the look of the header, you have to change the configuration of the image generator
• Generating the images server-side mingles the tasks of the frontend and backend developers
• You’ll need some extra markup to make your headers accessible

So what I wanted to make was a plugin that does not require lots of http requests, allows you to style your headers using only css, and which does not require additional markup.

How to use the plugin

To use the plugin, just follow these simple steps:

1. download the plugin and unzip it
2. add jquery.textreflection.min.css to the head of your document
3. put the images folder in the same folder as the css file
4. add jQuery at the end of the body
5. add jquery.textreflection.min.js at the end of the body (after jQuery)
6. add class="textreflection" to every header (or any other text element) you want to have a reflection

(To allow easy inspection of the source code, I have used the uncompressed css and js files on this page.)

Finetuning the reflection

Depending on the css of your headers, the reflection may need some adjustments. You can finetune that in the css file. I’ve put the rules you may want to adjust at the beginning of the file.

How the plugin works

When the DOM is ready, the plugin searches every element which has a class of textreflection.
It then clones every element and flips it vertically. A div is then positioned on top of the clone, and as its background, it is given a css gradient which runs from 70% transparent to white. Browsers that don’t support css gradients get a gradient image as their background instead.

Possible improvements

Native reflections in Webkit

Webkit has a native css solution for reflections: -webkit-box-reflect. The plugin could be adjusted to use the native css for browsers that support it. (For more info on -webkit-box-reflect, read Mastering CSS Reflections in Webkit.)

Screen reader improvements

With my plugin, every header is being duplicated for the reflection. I’m not sure how screen readers will handle this, but I can imagine they’ll read every header twice. There may be a way to tell screen readers to ignore the cloned header, but I don’t know how. If you do, please let me know!