Bg-gradient-matrix

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 general gradient background styles.

Value

The bg-gradient-matrix style accepts values in one of two forms. Either it is a five-element array in the form [ width, height, rotation (radians), tx, ty ] to be passed to the Flash function flash.geom.Matrix.createGradientBox to generate the gradient matrix. Or it is a six-element array mapping to the flash.geom.Matrix parameters [ a, b, c, d, tx, ty ].

bg-gradient-matrix: [ 200, 100, 1.57, 10, 5 ] ;

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

This example shows the effect of changing the rotation of the gradient matrix on roll over and roll out of the mouse.

<style><![CDATA[
	div
		{			
			bg-gradient-type: radial;
			bg-gradient-colors: [ 0xFF0000, 0x0000FF ];
			bg-gradient-alphas: [ 1, 1 ];
			bg-gradient-ratios: [ 0, 255 ];
			bg-gradient-matrix: [ 400, 400, .785, 0, 0 ];
			bg-gradient-spread: pad;
			bg-gradient-interpolation: rgb;
			bg-gradient-focal-point-ratio: .5;
			background-shape: ellipse;
		}
	div:hover
		{
			bg-gradient-matrix: [ 400, 400, 1.57, 0, 0 ];
		}
]]></style>
<div style="width: 400px; height: 400px; margin: auto;"/>

Can Be Applied To

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

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