Bg-gradient-focal-point-ratio

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 focal point ratio, a number that controls the location of the focal point of the gradient.


Value

The bg-gradient-focal-point-ratio style accepts decimal values between -1 and 1. A "0" value means that the focal point is in the center. "1" means that the focal point is at the outer-most edge of the gradient circle. "-1" means that the focal point is at the opposite outer-most edge of the gradient circle. The default value is not set, though "0" should be used most often. 

bg-gradient-focal-point-ratio: 0;


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 tweens the focal point ratio on rollover. 

<style><![CDATA[
	div
		{			
			style-tween-ease: fl.transitions.easing.Strong.easeInOut;
			style-tween-duration: 10;
			style-tween-use-secs: false;
 
			bg-gradient-type: radial;
			bg-gradient-colors: [ 0x00FF00, 0x0088FF ];
			bg-gradient-alphas: [ 1, .3 ];
			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: 1;
		}
	div:hover
		{
			bg-gradient-focal-point-ratio: -1;
		}
]]></style>
<div style="width: 200px; height: 200px; 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-focal-point-ratio"
Personal tools
Get Adobe Flash player