Bg-gradient-ratios

From Frontal Wiki

Jump to: navigation, search

Contents

Purpose

This style is part of a group of styles used to add gradient backgrounds to visual elements. This particular style sets the percentage each color will appear in the gradient background.


Value

The bg-gradient-ratios style accepts an array of ratio values the length of which should match the number of colors specified via bg-gradient-colors. The gradient area is expressed as a range from 0 (no area) to 255 (entire area), so any ratio value after the first and before the last should be some value in between 0 and 255. Each ratio must increase sequentially. The default value is not set. 

bg-gradient-ratios: [ 0, ratio2, ... , 255 ] ;


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:

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 color ratios of the gradient on roll over and roll out of the mouse. 

<style><![CDATA[
	div
		{			
			bg-gradient-type: linear;
			bg-gradient-colors: [ 0x00FF00, 0x00FF22, 0x0088FF, 0x5656CC, 0x225599 ];
			bg-gradient-alphas: [ 1, 1, 1, 1, 1 ];
			bg-gradient-ratios: [ 0, 50, 90, 180, 255 ];
			bg-gradient-matrix: [ 400, 400, 0, 0, 0 ];
			bg-gradient-spread: pad;
			bg-gradient-interpolation: rgb;
			bg-gradient-focal-point-ratio: 0;
		}
	div:hover
		{
			bg-gradient-ratios: [ 0, 25, 45, 90, 255 ];
		}
]]></style>
<div style="width: 400px; height: 400px; margin: auto;"/>


Can Be Applied To

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

Retrieved from "http://www.frontalcode.com/wiki/index.php/Bg-gradient-ratios"
Personal tools
Get Adobe Flash player