Documentation

HDGradient

The HDGradient object simplifies the creation of linear and radial gradients. Once created, these objects can be assigned to properties such as .backgroundGradient.

Example:

// Create an HDGradient object and assign as background:
var gradient = new HDGradient();
gradient.angle = "90";
gradient.addStop("#00ABEB");
gradient.addStop("blue", "50%");
gradient.addStop("red");

// apply the gradient to div1
div1.backgroundGradient = gradient;

View full object documentation on HandheldDesigner.com...

Object Properties & Methods

 addStopAdd a color transition to the gradient.
 angleSet the angle of a linear gradient.
 positionSet the center position of a radial gradient.
 repeatingCauses the gradient pattern to repeat.
 shapeSet the shape of a radial gradient.
 sizeSet the size of a radial gradient.
 toSideOrCornerSet the direction of a linear gradient.
 typeSet the gradient type.

addStop

MethodFirst available in version 1.0.0

Add a color transition to the gradient.

Usage:

gradient.addStop(color, percentageOrLength);

Arguments:

colorThe color of the new color-stop. Can be named color, hex color, or rgb() color.
percentageOrLength (optional)A value defining the location of the color transition along the gradient. Can either a percentage ("33%"), or a distance in pixels ("150px").

Example:

// Transition to red halfway through the gradient
gradient.addStop("red", "50%");

angle

PropertyFirst available in version 1.0.0

Set the angle of a linear gradient's "gradient-line", which defines the direction of the gradient and determines how color-stops are positioned. "0deg" points upwards, "90deg" points toward the right, and positive angles go clockwise. (The "deg" suffix is CSS3 standard, but is optional here.)

See the CSS3 gradient documentation for complete details.

Note: You can define the "gradient-line" with either this property, or the toSideOrCorner property.

Example:

var gradient = new HDGradient();
gradient.angle = "90deg";

position

PropertyFirst available in version 1.0.0

Set the center position of a radial gradient, using the CSS3 'background-position' syntax. If not set, this property defaults to "center", centering the gradient in the object.

See the CSS3 gradient documentation for complete details.

Example:

var gradient = new HDGradient();
gradient.type = "radial";
gradient.position = "left center";

// or:
gradient.position = "left 10px top 15px";

repeating

PropertyFirst available in version 1.0.0

Causes the gradient pattern to repeat. Set to true for a repeating gradient. See CSS3 gradient documentation for complete details.

Example:

var gradient = new HDGradient();
gradient.repeating = true;

shape

PropertyFirst available in version 1.0.0

Set the shape of a radial gradient. Can be either "circle" or "ellipse".

See the CSS3 gradient documentation for complete details.

Example:

var gradient = new HDGradient();
gradient.shape = "ellipse";

size

PropertyFirst available in version 1.0.0

Set the size of a radial gradient. Can be one of the following values: "closest-side", "closest-corner", "farthest-side", "farthest-corner", "contain", "cover". See the CSS3 gradient documentation for complete details.

Example:

var gradient = new HDGradient();
gradient.shape = "cover";

toSideOrCorner

PropertyFirst available in version 1.0.0

Set the direction of a linear gradient's "gradient-line" which defines the angle of the gradient and determines how color-stops are positioned. Keywords "left" or "right" and "top" or "bottom" can be specified (either alone or in combination).

See the CSS3 gradient documentation for complete details.

Note: You can define the "gradient-line" with either this property, or the angle property.

Example:

var gradient = new HDGradient();
gradient.toSideOrCorner = "left top";

type

PropertyFirst available in version 1.0.0

Set the gradient type. Values "linear" and "radial" are supported. If not set, object defaults to "linear".

Usage:

gradient.type = "linear";

Example:

// Create an linear HDGradient object:
var gradient = new HDGradient();
gradient.type = "linear";

Copyright © 2010-2017, Handheld Designer, LLC, All Rights Reserved.
Made by hand in New England, USA.