File: simple_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Light source   simple_example.html   Download  
File: simple_example.html
Role: Example script
Content type: text/plain
Description: Example with static light source
Class: Light source
Apply a shadow to elements based on light position
Author: By
Last change:
Date: 12 years ago
Size: 1,622 bytes
 

Contents

Class file image Download
<!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; } #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>