Border-gradient-alphas

From Frontal Wiki

Jump to: navigation, search
This page is PENDING

Contents

Purpose

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

Value

The border-gradient-alphas style accepts an array 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. 

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


This style is cascading.

Remarks

In order to create a gradient border, the border-gradient-type, border-gradient-colors and border-gradient-matrix styles must be set.

The entire group of styles is:

Moreover, border-gradient-type must be set for the particular visual element that is to have the gradient background. (All of the other styles are cascading.) This style relates to Flash's lineGradientStyle method and its documentation should be consulted.

Example

Here is an example of a linear gradient with a five color border. This example shows the effect of changing the alpha for each color of the gradient on roll over and roll out of the mouse.: 

<style>
div
    {			
	margin: auto;
	border-width: 40px;
 
	border-gradient-type: linear;
	border-gradient-colors: [ 0xFFFF00, 0xFF6600, 0xFF0000, 0xFF00FF, 0x0000FF ];
	border-gradient-alphas: [ .5, .5, .5, .5, .5 ];
	border-gradient-ratios: [ 0, 50, 90, 180, 255 ];
	border-gradient-matrix: [ 200, 200, .785, 0, 0 ];
	border-gradient-spread: pad;
	border-gradient-interpolation: rgb;
    }
div:hover
    {
	border-gradient-alphas: [ 1, 1, 1, 1, 1 ];
    }
 
</style>
<div style="width: 200px; height: 200px;"/>



Can Be Applied To

This style can be applied to:

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