<!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: 0px 0 150px 0;
border: 1px solid black;
}
#source
{
position: absolute;
top: 120px;
left: 120px;
width: 146px;
height: 150px;
background-image: url("./lightbulb.png");
}
</style>
</head>
<body>
<h3>Click on light bulb to toggle it.</h3>
<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' onclick='toggle_light(this)'>
</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: 193,
//y position of light source
sourceY: 195
});
ls.off();
var off = true;
function toggle_light(elem){
if(off)
{
ls.on();
off = false;
elem.style.backgroundPosition = "0px -150px";
}
else
{
ls.off();
off = true;
elem.style.backgroundPosition = "0px 0px";
}
}
</script>
</body>
</html>
|
Download
