Get new jQuery plugins just once a week



November 24, 2014

Time-aware algorithm driven shadows for icons.

four-shadows is a jQuery plugin for time-aware algorithm driven shadows for icons for creating shadows according to current time.

Created by Santhosh Sundar



four-shadows jQuery plugin


Four Shadows

Design Meets Code.

An approach to replace conventional 5 o'clock shadow for iconography with intelligent time-aware, algorithm-driven shadows using simple sprites. The direction of the shadow changes according to the time of the day and based on the direction of the 'hour hand' of an analog clock. This results in natural and enriched user experience on the web.


Design Concept

It is a simple concept derived from the evolution where time was once read looking into the direction of the shadow cast from a pole and inspired by the latest iconography trend of long 5 o'clock shadows. Design must no longer be static. It needs to relate to real-world entity that humans are accustomed to over centuries. </enoughsaid>


1. Include jQuery and fourshadows.js into your html file.
2. Place as many icons you need in your HTML with filename in data-icon attribute:
    <div class="fs-icon-l fs-cast" data-icon="filename.png"></div>
3. Using sample or the placeholder sprite that's provided in the package, create new ones. Ensure the direction of shadows cast as per the sample and to be placed in same order.
4. Point to the directory where image assets are stored in fourshadows.js settings.
5. Include this in your CSS file:
    .fs-icon-l {width: 512px; height: 512px;}
    .fs-icon-m {width: 256px; height: 256px;}
    .fs-icon-s {width: 128px; height: 128px;}
    .fs-icon-xs {width: 64px; height: 64px;}


Change settings as per requirement in fourshadows.js.
    fourShadows.settings = {
        dimension   : 512, 
        defaultTime : 5, 
        $el         : $('div.fs-cast'), 
        iconsPath   : 'icons/' 
Icon sizes

Use the class accordingly in the markup:

These dimensions can be altered any time. But it would also require you to change properties in CSS for corresponding classes.


The script is written with performance in mind. And it weighs < 2 KB, under 30 lines excluding comments. I recommend using minified version for your production site.


Work(s) inspired by FourShadows.js

box-sciagraphy -

Future Improvements

This project is an intital draft of an idea that sparked. Feel free to pitch in your ideas, suggestions to improve, comment, critique, debate on the use of the plugin etc. The code is open source, hence you are most welcome to fork / to come up with derivative work, having better idea / design concepts. Cheers!


The MIT License (MIT)

Copyright (c) 2014 Santhosh Sundar


Related posts:

Viskit js
Goal Progress
four-shadows jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas