Fill and Stroke Properties

These properties affect the background and border of the element.

Fill and Stroke properties in the Property Inspector

Fill Properties

These properties affect the element background.

Gradient Editing

Any time you customize a gradient in DGLux5:

To change a color value, click the small square below the track in the dialog, and then use the color picker.
To add a color to the gradient, click below the track in the dialog.
To delete a color from the gradient, right-click the small square.
Drag colors to move them.

Fill

Fill
Opens the Fill dialog for defining the fill for this element.

The Fill property

Fill Type

Fill Type
Defines the type of fill for this element.

No fill
The element has no fill.

Solid color
The element is filled with a single color that you specify.

Gradient
The element is filled with a gradient that you specify.

Image
The element is filled using an image that you specify.

The Fill Type property

Fill Color

Fill Color
Specifies the solid color fill for this element.

The Fill Color property

Fill Opacity

Fill Opacity
Specifies the opacity of this element's solid color fill.

The Fill Opacity property

Gradient Type

Gradient Type
Specifies whether a radial or linear gradient fills this element. To add colors to the gradient, click below the track in the dialog. To delete colors, right-click on them. To move colors, left-click them and drag.

Linear
The gradient is defined by a linear axis.

Radial
The gradient is defined by a circle or an ellipse.

The Gradient Type property

Radial Gradient Shape

Radial Gradient Shape
Specifies whether this radial gradient is defined by a circle or an ellipse.

The Radial Gradient Shape property

Radial Gradient Size

Radial Gradient Size
Specifies the size of the circle or ellipse that defines this radial gradient.

Absolute
You specify a value for the horizontal radius. If the shape is an ellipse, you also specify a value for the vertical radius.

Farthest Corner
The edge of the circle or ellipse meets the corner of the container that is farthest from the circle or ellipse's center.

Closest Side
If the shape is a circle, its edge meets the container edge closest to its center. If the shape is an ellipse, its edge meets the two container edges closest to its center.

Farthest Side
If the shape is a circle, its edge meets the container edge farthest from its center. If the shape is an ellipse, its edge meets the two container edges farthest from its center.

Closest Corner
The edge of the circle or ellipse meets the corner of the container that is closest to the circle or ellipse's center.

The Radial Gradient Size property

Radial Gradient Size X

Radial Gradient Size X
Specifies the horizontal radius of the circle or ellipse that defines this radial gradient, as a pixel value or a percentage of half the container width.

The Radial Gradient Size X property

Radial Gradient Size Y

Radial Gradient Size Y
Specifies the vertical radius of the ellipse that defines this radial gradient, as a pixel value or a percentage of half the container height.

The Radial Gradient Size Y property

Radial Gradient Center X

Radial Gradient Center X
Specifies the distance from the leftmost edge of the container to the center of the circle or ellipse that defines this radial gradient, as a pixel value or a percentage of the container width.

The Radial Gradient Center X property

Radial Gradient Center Y

Radial Gradient Center Y
Specifies the distance from the topmost edge of the container to the center of the circle or ellipse that defines this radial gradient, as a pixel value or a percentage of the container height.

The Radial Gradient Center Y property

Gradient Angle

Gradient Angle
Specifies the angle of the line that defines this linear gradient. Valid values are between −180 and 180.

The Gradient Angle property

Gradient Repeat

Gradient Repeat
Specifies whether this gradient repeats to fill this element. Only applies if the track that defines the gradient has either a left edge or a right edge that is undefined.

The Gradient Repeat property

Gradient Color Opacity

Gradient Color Opacity
Defines the opacity of the selected fill color in the gradient.

The Gradient Color Opacity property

Gradient Color Position

Gradient Color Position
Defines the position of the selected fill color in the gradient. A value of 0% positions the selected color at the leftmost edge of the track that defines the gradient. A value of 100% positions it at the rightmost edge.

The Gradient Color Position property

Fill URL

Fill URL
Specifies the location of the image that fills this element. Click the folder icon to select or upload an image, or enter a relative URL within the project, such as assets/image.png. You can also enter any absolute URL, even if it is outside of your project or DGLux.

You can use any image format that is supported by the user's browser.

The Fill URL property

Fill Tiling and Scaling

Fill Tiling and Scaling
The Fill Tiling and Scaling properties are similar to the tiling and scaling properties for images.

The Fill Tiling and Scaling properties

Stroke Properties

These properties affect the element border.

Border

Border
Opens the Border dialog for defining the border for this element.

Borders are part of an object's width and height. See Borders, Padding, and Content Size.

The Border property

Border Type

Border Type
Defines the type of border for this element.

No Border
This element has no border.

Solid Color
This element is outlined with a single color that you specify.

Image
This element's border is defined using an image that you specify.

The Border Type property

Border Width

Border Width
Defines the stroke weight or border width for outlining this element.

Borders are part of an object's width and height. See Borders, Padding, and Content Size.

The Border Width property

Stroke Color

Stroke Color
Defines the stroke color for outlining this element.

The Stroke Color property

Stroke Opacity

Stroke Opacity
Defines the opacity of this element's outline.

The Stroke Opacity property

Stroke Style

Stroke Style
Defines the stroke style for outlining this element. You can choose between these options:

None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
Dotted Solid Double Dashed
Dotted Solid

The Stroke Style property

Border URL

Border URL
Defines the location of the image that is used for this element's border. Click the folder icon to select or upload an image, or enter a relative URL within the project, such as assets/image.png. You can also enter any absolute URL, even if it is outside of your project or DGLux.

Only works if the Border Width property is more than zero.

You can use any image format that is supported by the user's browser.

The Border URL property

Border Tiling/Scaling

Border Tiling/Scaling
Determines whether the image tiles or scales around the border.

No Tiling
The image does not tile. An image larger than the allotted space is clipped.

Tiling
The image tiles to fill the border either horizontally, vertically, or both horizontally and vertically. Image corners are placed in the corresponding corners of the container.

Scaling
The image scales to the size of the container.

The Border Tiling and Scaling properties

Border Tiling Options

Border Tiling Options
Determines how the image tiles. Image corners are placed in the corresponding corners of the container.

Repeat
The image tiles to fill the border. Some tiles might be clipped. Only works properly if the Border Width property is less than the image width and height.

Round
The image tiles, and scales to fit the nearest whole number of tiles. Only works properly if the Border Width property is less than the image width and height. In Chrome and Safari, Round might be interpreted as Repeat.

The Border Tiling options

Border Scaling Options

Border Scaling Options
Determines how the image scales:

Cover
The image scales to fill each space between two borders.

Scale-9
This is useful if your stroke image is intended to create a border using scale-9 stretching. The image scales to cover a 9-section grid that you specify. The four corner sections do not scale. The top-center and bottom-center sections scale horizontally only. The left-center and right-center sections scale vertically only. The center section scales horizontally and vertically.