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.




   <!-- 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' />
      <bevel id='gradient' distance='100' angle='120' blurX='128' blurY='128' highlightColor='ff0000'   
             highlightAlpha='.5' shadowColor='0000ff' shadowAlpha='.5' strength='1' quality='3' />


   <!-- masked 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' />
   <!-- masking object -->
   <object id='star' offset_x='145' offset_y='50'>  
      <!-- a star -->
         <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' />


 < previousnext > 

Copyright © 2010-2017,