<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Light source class provides a way to define light source position
* and emulate text and box shadows according to provided position of light source.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Light-source-for-CSS3-shadows
**************************************************************/
-->
<html>
<head>
<style type='text/css'>
#simple
{
width: 300px;
position: absolute;
top: 100px;
left: 100px;
}
.sub
{
margin: 50px;
border: 1px solid black;
}
</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>
<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: false,
//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
});
document.onmousemove = function(e){
ls.setSource(e.pageX, e.pageY);
};
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
