Long Shadow Plugin for jQuery

Long shadow design is something that is fairly popular lately, so I decided to “try my hand” into creating jQuery plugin to support the creation the long shadow effect on text and image HTML elements. Long shadow design refers to adding long shadows (ha!) to flat design items giving them a sleek 3D look.

I chose making it a jQuery plugin because I wanted to give it flexibility – I saw other solutions for the long shadow flat design effect, but they were fairly boring as they only created a shadow of the same size and the shadow angle was fixed.

As an inspiration for the following results I used some of the images from the post Long Shadow Design – A New Trend?.
The following long shadow effects are NOT IMAGES, they are pure CSS / JavaScript / HTML.
Here’s how it works:

Quick tip: This long shadow plugin for jQuery also works on text. Try experimenting with different web fonts to get some real nice effects. I recently published on MockoFun a list of +50 free Christmas fonts that you can use online. Check it out and use it with this plugin.

Cool Music Note Long Shadow Design

This is made using the ♫ ASCII character and applying the jQuery plugin

Apple Logo Long Shadow Design

The plugin can be used for images too, so I applied it to a PNG with the Apple logo and with some extra CSS styles I got this.

Skype Logo 3D with Long Shadow Design

Here, using the Skype logo image twice, I applied the long shadows jQuery plugin once with a flat shadow for the 3D effect and once with a transparent shadow.

Internet Explorer Logo with Long Shadow Design

This is my favorite result and not because Internet Explorer is something I like that much (because I don’t). Starting from only the PNG with the IE logo, I applied the long shadows jQuery Plugin for a flat shadow, and then with some extra CSS styles for making the box look classy and with nice edges. You can even have 2 versions of this: square or round.

Old Text Web Font with Long Shadow Design

The long shadows jQuery plugin also works for any fonts including web fonts. To get the following result I used the text twice with different settings for the plugin.

umbra

latin a shade, shadow

You can get the Long Shadow jQuery plugin here.

Any comments or questions are welcome. Hope you’ve enjoyed this post

I am aware there are a lot of other similar jQuery plugins for achieving the same long shadow effect, and some might say that you can achieve this effect only with CSS and why would you need a jQuery plugin. This is all true, but I think that my plugin is a quicker way of creating a very nice and flexible long shadow design and also, compared to other plugins this offers:

• total control over the angle of the shadow (you indicate in deg the exact angle you want); also you can do that independently for the bounding box and the inner element
• total control over the long shadow color and color transitions
• so far, I’ve only found on the internet long shadow design jQuery plugins for text; this plugin offers long shadow design for images too;
• repeated calls of this plugin with different parameters works without any problems and you can create very cool animation effects (for example you can interactively set the angle of the shadow on mouse move)