File: class.font.effect.htm

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

Contents

Class file image Download 



<div class='css-tool  tool-font-effect-generator row'>

  <div class='tool-title'>Font Shadow</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 (px)</div>
      <div class='field'><input type='text' value='2' /></div>
    </div><!-- end input -->
    
    <div class='input vd'>
      <div class='label'>V Distance (px)</div>
      <div class='field'><input type='text' value='3' /></div>
    </div><!-- end input -->
    
	
    <div class='input blur'>
      <div class='label'>Blur (px)</div>
      <div class='field'><input type='text' value='3' /></div>
    </div><!-- end input -->
    
	
    


    
    
    <div class='input opacity'>
      <div class='label'>Opacity (0.0 - 1.0)</div>
      <div class='field'><input type='text' value='0.3' /></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='0' /></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='0' /></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='0' /></div>
      </div><!-- end input -->
      
    </div><!-- End Colors -->
    
    
    
	<div class='stroke row'>
		 <div class='input stroke-width small-6 columns'>
		  <div class='label'>Stroke Width (px)</div>
		  <div class='field'><input type='text' value='0' /></div>
		</div><!-- end input -->
	   
		 <div class='input stroke-color small-6 columns'>
		  <div class='label'>Stroke Color (hex/color)</div>
		  <div class='field'><input type='text' value='#ccc' /></div>
		</div><!-- end input -->
	</div>
   
    
    
  </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 -->