Bg-gradient-alphas

From Frontal Wiki

Purpose

This style is part of a group of styles used to add gradient backgrounds to visual elements. This particular style sets the opacity of the gradient colors in matrix format.

Value

The bg-gradient-alphas style accepts a matrix of alpha values; the amount of alpha values in the matrix should match the amount of hexadecimal colors in the colors matrix. Accepted alpha values are from 0 (completely transparent) to 1 (completely opaque). The default value is not set.

bg-gradient-alphas: [ alpha1, alpha2, ... , alpha15 ] ;

This style is cascading.

Remarks

Gradient backgrounds are implemented using a feature of Flash. More information may be found in the Flash documentation for Graphics.beginGradientFill.

In order to create a gradient background in frontal, all of the bg-gradient styles must be set:

• bg-gradient-type
• bg-gradient-colors
• bg-gradient-alphas
• bg-gradient-ratios
• bg-gradient-matrix
• bg-gradient-spread
• bg-gradient-interpolation
• bg-gradient-focal-point-ratio

Moreover, bg-gradient-type must be set for the particular visual element that is to have the gradient background. (All of the other styles are cascading.)

Example

<style>
    div
    {			
	bg-gradient-type: radial;
	bg-gradient-colors: [ 0x00FF00, 0x0088FF ];
	bg-gradient-alphas: [ .5, 1 ];
	bg-gradient-ratios: [ 0, 255 ];
	bg-gradient-matrix: [ 200, 200, .785, 0, 0 ];
	bg-gradient-spread: pad;
	bg-gradient-interpolation: rgb;
	bg-gradient-focal-point-ratio: 0;
    }
</style>
<text style="font-family: Swift LT Std; font-size: 24px; margin: auto;"><![CDATA[Hello, world.]]></text>
<div style="top: 0px; width: 200px; height: 200px; margin: auto;"/>

Can Be Applied To

This style can be applied to all visual elements in particular:

• div
• document
• img
• text
• video
• form
• input