gradient | Loop and Break

The <gradient> CSS data type denotes a CSS made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

Like with any case involving interpolation of colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of grey to appear when both the color and the opacity are varying.

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, 
	from(#ffffff), to(#999999));
	background-image: -webkit-linear-gradient(top, #ffffff, #999999);
	background-image: -moz-linear-gradient(top, #ffffff, #999999);
	background-image: -o-linear-gradient(top, #ffffff, #999999);
	background-image: linear-gradient(to bottom, #ffffff, #999999);
}
</style>
</head>
<body>
<div>
You can easily change the formatting of selected<br>
 text in the document text by choosing a look for <br>
the selected text from the Quick Styles gallery <br>
 on the Home tab. You can also format text directly <br>
 by using the other controls on the Home tab. <br>
 Most controls offer a choice of using the look <br>
 from the current theme or using a format that <br>
 you specify directly.</body>
 </div>
</html>

Categories