This feels unnecessary, although it's some cool code for sure. I think it ends up looking unnatural when the generated shadow doesn't match the shadow in the icon itself; in the demo on the github page, this would be at 1 o'clock and 5 o'clock.
Clever, but light comes from the sky (it always comes from the sky in nature...light from below weirds us out). It's probably poor design to have shadows rotating throughout the day. Might be more friendly to have the shadows play like real shadows (never going above the object).
Also, I think this generally would confuse users. I visit at 10AM it looks one way, I visit at 3PM it looks another, and I have no idea why as a user. Even if you paired it with other elements, you've still got the shadow all over the place.
I remember about 10 years ago watching a guy in school build a site that had a header that would have full sunrise-sunset based on your time in cute artwork. If you gave your location, it would display current weather too.
So OP, I think this has limited use; but its good to explore and experiment and see what you end up with. Perhaps with more thought/iterations you'll end up with something really amazing.
Do you work with your screen laying flat, such that you're looking down on it?
I'm not being argumentative; there is a history of the "desktop" metaphor, where it did seem sort of like the user was looking down on it from above. That particular approach to the metaphor seems to have faded deep into history. Not saying it's wrong, just that we seem to have moved somewhere else with UI, and I feel like a corkboard with pieces of paper tacked to it is a more fitting analogy for the way many of our current desktops work. The way shadows are used in most current desktops match that metaphor more closely than objects on a horizontal "desk" surface. And, given that we never use screens sitting flat on a horizontal surface (even the Microsoft Surface evolved to go vertical). The ergonomics of staring straight down is pretty awful. Our heads get really heavy at that angle, causing back pain.
Edit: Some "desktop" metaphor UIs where a "top-down" light source might logically lead to OPs shadow design:
Even the modern take (Bumptop for Mac) seems needlessly cluttered and cumbersome to manage. Then again, I prefer tiled interfaces, so I lean toward the extreme on the other end of the spectrum.
Google maps does this for shadows on buildings - check out something tall to see. It makes more sense there as the shadows actually fall in that location. As an interface it's a cool idea but we normally consider light to fall from top to bottom.
Neat idea, but shadows cast on the ground don't move around an object a full 360deg over the course of the day.
If the metaphor is that we're looking at the object from above, then the angle of the shadow would depend on the time of day, the day of the year, and the object's latitude. Now THAT would be a neat plugin.
Others have mentioned that Google does it like this in Google Maps...which is even stranger because there is a very clear real world analog in that case. I would have expected that they would take the care to render the shadows as they would actually appear for that location at that time.
This would be cool on a mobile, since you usually hold it with the display facing towards the sky. But then, the length and angle of the shadow have to depend on the orientation of the phone.
Wouldn't using svg's be tremendously more powerful, rather than pngs and image sprites? Of course, there are compatibility issues with older browsers but placing 1 of 4 pngs is just barely "time aware"
The effect gets totally ruined on the demo page where the HTML5 and CSS3 shields are used which have their own light source. Screenshot: http://i.imgur.com/prMIIOQ.png
Nerd Snipe! - Pick a website that uses consistent shadows. Assume that the website is a 3 dimensional object that could cast those shadows. Also assume that the object is positioned sitting on the ground, with the length of the page normal to the surface of the earth. Provide a location, rotation, time of day and day of year in which the shadows are accurate.
24 comments
[ 2.5 ms ] story [ 62.7 ms ] threadSource: http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flash...
Also, I think this generally would confuse users. I visit at 10AM it looks one way, I visit at 3PM it looks another, and I have no idea why as a user. Even if you paired it with other elements, you've still got the shadow all over the place.
I remember about 10 years ago watching a guy in school build a site that had a header that would have full sunrise-sunset based on your time in cute artwork. If you gave your location, it would display current weather too.
So OP, I think this has limited use; but its good to explore and experiment and see what you end up with. Perhaps with more thought/iterations you'll end up with something really amazing.
I'm not being argumentative; there is a history of the "desktop" metaphor, where it did seem sort of like the user was looking down on it from above. That particular approach to the metaphor seems to have faded deep into history. Not saying it's wrong, just that we seem to have moved somewhere else with UI, and I feel like a corkboard with pieces of paper tacked to it is a more fitting analogy for the way many of our current desktops work. The way shadows are used in most current desktops match that metaphor more closely than objects on a horizontal "desk" surface. And, given that we never use screens sitting flat on a horizontal surface (even the Microsoft Surface evolved to go vertical). The ergonomics of staring straight down is pretty awful. Our heads get really heavy at that angle, causing back pain.
Edit: Some "desktop" metaphor UIs where a "top-down" light source might logically lead to OPs shadow design:
http://blog.codinghorror.com/content/images/uploads/2006/05/...
http://kruzeniski.com/wp-content/uploads/2011/04/how_print_i...
Even the modern take (Bumptop for Mac) seems needlessly cluttered and cumbersome to manage. Then again, I prefer tiled interfaces, so I lean toward the extreme on the other end of the spectrum.
If the metaphor is that we're looking at the object from above, then the angle of the shadow would depend on the time of day, the day of the year, and the object's latitude. Now THAT would be a neat plugin.
Others have mentioned that Google does it like this in Google Maps...which is even stranger because there is a very clear real world analog in that case. I would have expected that they would take the care to render the shadows as they would actually appear for that location at that time.
Perhaps a related but more useful idea would be to adjust the colors of your site to match the user's local time like f.lux...