Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

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.

Contents

Download

Example codes

<!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

I am a text one
I am a text two

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew light_source(id, config);
DescriptionProvide 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 namesetSource(x,y)
DescriptionChange 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)

Turn light source off

Back to method list

Method nameoff()
DescriptionTurn the light source off
Example

ls.off()

Turn light source on

Back to method list

Method nameon()
DescriptionTurn the light source on using last known position
Example

ls.on()

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus