Using Angles
If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).Syntax
background: linear-gradient(angle, color-stop1, color-stop2);
The following example shows how to use angles on linear gradients:
Example
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:100px;
background: -webkit-linear-gradient(0deg, red, blue); /* For Safari */
background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}
#grad2
{
height:100px;
background: -webkit-linear-gradient(90deg, red, blue); /* For Safari */
background: -o-linear-gradient(90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, red, blue); /* Standard syntax (must be last) */
}
#grad3
{
height:100px;
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax (must be last) */
}
#grad4
{
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* For Safari */
background: -o-linear-gradient(-90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradients - Using Different Angles</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu
0 comments:
Post a Comment