Light & Shadow

How it works

Elements get the class 'shadowThrowing', their z-index is set so some good value. This document has a z-index of 10. The div named 'Lightsource' has 11. After loading a lightsource is generated

light = new Lightsource({
        intensity:0.5,
        spherical: {
                distance: 500,
                polar: 45,
                azimuth: 90
        },
        lightSize: 500
});

This sets up the position of the light in spherical coordinates. Origin is left upper corner. Intensity means the 'darkness' of the shadow. The Lightsize determines the 'twilight', it could also be set up with { width:500, height: 250 } which creates a asymmetric twilight.
Then the DOM-tree is examinated for elements with class-name 'shadowThrowing'. Each of them gets a 'shadow' by generating a div containing 9 absolutely positioned png-images. These images contain 4 corners and 4 borders with shading black to transparent and a black 'core-shadow'.
The shadows are inserted before the shadowThrowing-elements with the same z-index and are registered to the lightsource-instance.
After generating the lightsource is redrawn, which means repositioning and resizing of the shadow, and the twilight.

window.onresize = Lightsource.redraw;

All Lightsources are redrawn, in our example just one.

Is my Browser a fast Ray-tracing Numbercruncher?

No. It is just a trick and simple vector-calculations. Especially if the shadow of a higher z-index hits two different z-index levels you can see that it is just a rectangle. Also the calculations are related to z-index 0 so stacked shadows are not correct. So it's just a funny effect.

Just check out with the form or with the buttons.

What can be done

Make an absolute positioned div which can be resized with em-text and scaling images. Take scriptaculous, make a growing Effect.Resize and on the updates increase the elements z-index and call ithe elements shadow.shadowUpdate() method. . What do you see? An element lifting off the screen. (make sure that the lightsource is not too far away.)

Limitations and Todos

• Links in the shadow are not clickable. Any ideas how to fix this? An approach can be getting all "A" elements and clone them transparent without content with a high z-index. Click is working with the href. But how to issue HOVER on the original anchor?
• Forms in the shadow will no work. (?)
• Better rounding of the position and width of the shadow images. (Small hops while dynamically rotating. Cumulative mathematical error.)
• Replacing of the border inset and outset with fitting shadows
• Performance improvements (perhaps)

  413 moves of a lightsource; calls above 1%

  Method	Calls	%	Own Time	Time	Avg	Min	Max	File
  setStyle	12390	72.82%	10647.186ms	20891.87ms	1.686ms	0.313ms	91.956ms	prototype.js (line 1912)
  reposition	1239	9%	1315.23ms	23444.395ms	18.922ms	6.548ms	125.702ms	lightandshadow.js (line 182)
  _methodized	14868	7.33%	1071.554ms	22862.696ms	1.538ms	0.243ms	92.055ms	prototype.js (line 246)
  getStyle	1239	3.82%	558.55ms	611ms	0.493ms	0.156ms	2.479ms	prototype.js (line 1896)
  $A	15282	2.29%	335.325ms	335.325ms	0.022ms	0.016ms	0.541ms	prototype.js (line 805)
  setOpacity	1239	1.2%	175.439ms	197.848ms	0.16ms	0.144ms	2.769ms	prototype.js (line 1930)

Documentation

Not written up to now. RTFS (read the fine source).

Version 0.1

Just little testing...

• Firefox: works
• IE 6.0: some shading problems (transparent pngs)
• Safari 2.0.4: Some problems with shadow positions.
• Konqueror 3.5.6: rendering problems, opacity does not work

Download

• Tarball images and javascripts
• SVN Repository https://www.kufnerfutures.com/svn/plugins/lightandshadow/public
• RAILS script/plugin install -x https://www.kufnerfutures.com/svn/plugins/lightandshadow/
  (no rails code up to now - just a code-installer)