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: 10 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 -->