File: class.shadows.htm

Recommend this page to a friend!
  Classes of JImmy Bo   JavaScript CSS Generator   class.shadows.htm   Download  
File: class.shadows.htm
Role: Example script
Content type: text/plain
Description: Basic Template for Box Shadow CSS Editor
Class: JavaScript CSS Generator
Generate CSS styles dynamically
Author: By
Last change:
Date: 9 years ago
Size: 2,104 bytes
 

Contents

Class file image Download
<style> </style> <div class='css-tool tool-box-shadow-generator row'> <div class='tool-title'>Box Shadows</div> <div class='display small-12 columns'><div class='text'>Hello World!</div></div> <div class='inputs small-12 columns'> <div class='input hd'> <div class='label'>H Distance</div> <div class='field'><input type='text' value='2' /></div> </div><!-- end input --> <div class='input vd'> <div class='label'>V Distance</div> <div class='field'><input type='text' value='3' /></div> </div><!-- end input --> <div class='input blur'> <div class='label'>Blur</div> <div class='field'><input type='text' value='10' /></div> </div><!-- end input --> <div class='input spread'> <div class='label'>Spread</div> <div class='field'><input type='text' value='0' /></div> </div><!-- end input --> <div class='colors row'> <div class='input red small-4 columns'> <div class='label'>Red (0-255)</div> <div class='field'><input type='text' value='228' /></div> </div><!-- end input --> <div class='input green small-4 columns'> <div class='label'>Green (0-255)</div> <div class='field'><input type='text' value='162' /></div> </div><!-- end input --> <div class='input blue small-4 columns'> <div class='label '>Blue (0-255)</div> <div class='field '><input type='text' value='45' /></div> </div><!-- end input --> <div class='input opacity small-12 columns'> <div class='label'>Alpha/Opacity (0.0 - 1.0)</div> <div class='field'><input type='text' value='0.2' /></div> </div><!-- end input --> </div><!-- End Colors --> </div><!-- end inputs --> <div class='code-area small-12 columns'> <div class='label'>CSS</div> <div class='field'> <textarea></textarea> </div> </div> </div><!-- end tool-box-shadow-generator -->