Adding Gradients

A gradient defines a linear gradient pattern that you can use as the background color of a component.

To define gradients, select the Gradients tab on the Nexaweb Stylesheets Editor.

A gradient definition includes a name, orientation and a set of stop points for color transition.

To add a gradient, follow these steps:

1. Click on the Gradients tab in the Nexaweb Stylesheet Editor.
The Gradient Editor appears similar to Figure 20.

image\img00352.gif

Figure 20: Nexaweb Stylesheet - Gradient Editor.

2. Click Add beside the Gradients selection box.
A Gradient Name dialog appears.

3. Enter a name for this gradient and click OK.
The Gradient name appears in the Gradients selection box.

4. Click the box beside the orientation to use for this gradient: horizontal (right to left) or vertical (top to bottom).

5. Add two or more gradient stop points:

    1. Click Add beside the Gradient Stop Points section.
      An       Offset and Color value appear in the first available box closets to the top of the Gradient Stop Points list.

    2. Drag the slider beneath Offset in the Stop Point Details section to specify a percentage for the first stop point.
      The percentage for the Offset you specify appears above the slider and in the       Offset field in the Gradient Stop Points section.

    3. Click Pick beside the Color field in the Stop Point Details section.
      A color picker dialog appears.

    4. Select the color to use for this stop point.
      The color you select appears in the       Gradient Preview box and in the Color fields in the Gradient Stop Points and Stop Point Details section.

    5. Repeat Steps a-d to select a second stop point.
      The       Gradient Preview box displays the gradient that you define.

Note: Studio displays the stop point with the largest percentage in the lowest available position in the Gradient Stop Points list.

 

To remove a gradient, select the Gradients selection box and click Delete.

To remove a gradient stop point:

1. Select the gradient in the Gradients selection box.

2. Select the gradient stop point in the Gradient Stop Points section.

3. Click Delete.