Light source for CSS3 shadows

Light source class provides a way to define light source position and emulate text and box shadows according to provided position of light source. It is also possible to toggle light source.

Right now this effect is unsupported in IE all versions.

Package contains light_source.js, light_source.packed.js (packed javascript), three example files: simple_example.html (static light source), mouse_example.html (mouse as light source, box shadow only), mouse_light_source.html (mouse as light source, text shadow only, a lot of elements) to demonstrate class functionality.

Download
Example codes
Live Examples
Examples in action
Method list
Latest changes

Download

Back to contents

JS classes - Light source class

Example codes

Back to contents

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#simple
{
    width: 300px;
    position: absolute;
    top: 100px;
    left: 100px;
}
.sub
{
    margin: 50px;
    border: 1px solid black;
}
#source
{
    position: absolute;
    top: 190px;
    left: 200px;
}
</style>
</head>
<body>
<div id='simple'>
<div class='sub'>I am a text one</div>
<div class='sub'>I am a text two</div>
</div>
<div id='source'>
LighSource here
</div>
<script type="text/javascript" src="./light_source.packed.js" ></script>
<script type="text/javascript">
var ls = new light_source("simple",{
    //height of light source above objects
    sourceHeight: 3,
    //blur level against distance
    maxBlur: 50,
    //color of shadow
    shadowColor: "#aaa",
    //aplly shadow to text
    textShadow: true,
    //apply shadow to box
    boxShadow: true,
    //apply effect to all element's children
    includeChild: true,
    //x position of light source
    sourceX: 230,
    //y position of light source
    sourceY: 190
});
</script>
</body>
</html>

Live Examples

Back to contents

I am a text one

I am a text two

Examples in action

Back to contents

Example scripts provided with package in action:

Method list

Back to contents

Constructor
Change light source position
Turn light source off
Turn light source on

Constructor

Back to method list

Method name	new light_source(id, config);
Description	Provide light source position for HTML elements
Input parameters	string or HTML element id - id of element or HTML element itself, where to add blur effect effect int sourceHeight - height of the light source, above HTML objects - defines speed of shadow movement (default: 3) int maxBlur - blur level ratio against light source distance (default: 50) string shadowColor - color of a shadow, any CSS valid color (default: '#aaa') bool textShadow - apply shadow effect to text (default: 'true') bool boxShadow - apply shadow effect to element itself (default: 'true') bool includeChild - apply shadow effect to all elements children (default: 'true') int sourceX - x position of light source (default: 0) int sourceY - y position of light source (default: 0)
Example input	var ls = new light_source("example",{ //height of light source above objects sourceHeight: 3, //blur level against distance maxBlur: 50, //color of shadow shadowColor: "#aaa", //aplly shadow to text textShadow: true, //apply shadow to box boxShadow: true, //apply effect to all element's children includeChild: true, //x position of light source sourceX: 230, //y position of light source sourceY: 190 });

Change light source position

Back to method list

Method name	setSource(x,y)
Description	Change position of light source
Input parameters	int x - x position of light source int y - y position of light source
Example	ls.setSource(100,100)