SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Gradient Fill

 

This tool does not support gradient fills. However, a smooth bevel filter can be used to produce a linear gradient fill. More complex fills can also be created in external graphic applications as images, and then used with masks to fill other graphics.

 

Example

<slickboard>                

   <!-- a blue rectanglw with a smooth bevel that acts as a gradient fill -->
   <rect x='140' y='50' width='200' height='200' fill_color='8888ff' bevel='gradient' />
 
 
   <filter>
      <bevel id='gradient' distance='100' angle='120' blurX='128' blurY='128' highlightColor='ff0000'   
             highlightAlpha='.5' shadowColor='0000ff' shadowAlpha='.5' strength='1' quality='3' />
   </filter>
   
</slickboard>

 


<slickboard>
   
   <!-- masked object -->
   <object> 
      <!-- image created in Photoshop to use as a fill for the star object -->  
      <image url='images/fill.jpg' x='145' y='50' width='190' height='185' />  
  
      <mask target='star' />
   </object>  
   
   
   <!-- masking object -->
   <object id='star' offset_x='145' offset_y='50'>  
      <!-- a star -->
      <polygon>   
         <point x='96' y='0' />
         <point x='118' y='69' />
         <point x='191' y='69' />
         <point x='132' y='111' />
         <point x='154' y='180' />
         <point x='96' y='138' />
         <point x='37' y='180' />
         <point x='59' y='111' />
         <point x='0' y='69' />
         <point x='73' y='69' />
         <point x='96' y='0' />
      </polygon> 
   </object>  
      
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us