Long Shadow Design jQuery Plugin Examples


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:

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.

apple logo long shadow design

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.

skype logo 3D long shadow design
skype logo 3D

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.

internet explorer long shadow design
internet explorer long shadow design

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
Umbra

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)

 

John Negoita

View posts by John Negoita
I'm a Java programmer, been into programming since 1999 and having tons of fun with it.
[jetpack-related-posts]

2 Comments

  1. […] You can see other examples of the Long Shadows jQuery plugin here. […]

    Reply
  2. Dennis SchmetsSeptember 4, 2016

    Very good stuff for Webdesign, thanks a lot.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top