Brightness

From Frontal Wiki

Purpose

This style sets the brightness of a visual element.

Value

The brightness style is a number from -255 to 255.

brightness: 100;

Remarks

Fading an image to black or white is often done by putting it on an appropriate background and tweening its alpha to 0. A similar effect can be achieved by tweening its brightness to -255 or 255 respectively. The performance in this latter case is usually much better than the alpha fade.

Example

Roll over the image to tween it brightness to 255. Roll out to send it back to -255.

<style><![CDATA[
	img
		{
			style-tween-ease: fl.transitions.easing.Strong.easeInOut;
			style-tween-duration: 60;
			style-tween-use-secs: false;
 
			width: 100% leftover;
			height: 100% leftover;
			margin: 20%;
			resize-scale: showmost;
			brightness: -255;
		}
	img:hover
		{
			brightness: 255;
		}
]]></style>
<img src="http://www.frontalcode.com/assets/images/image_12.jpg" />

Can Be Applied To

This style can be applied to any visual element:

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