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:
- download the plugin and unzip it
- add jquery.textreflection.min.css to the head of your document
- put the images folder in the same folder as the css file
- add jQuery at the end of the body
- add jquery.textreflection.min.js at the end of the body (after jQuery)
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
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.
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!
Follow me on Twitter