carlosrojaso · May 12, 2014 19:12
diff --git a/CSS3 Linear Gradients b/CSS3 Linear Gradients
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #grad1
 {
 height:200px;
 background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
 background: linear-gradient(red, blue); /* Standard syntax (must be last) */
 }

 #grad2
 {
 background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
 background: linear-gradient(to right, red , blue); /* Standard syntax */
 }

 #grad3
 {
 background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
 background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
 }

 #grad4
 {
 background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
 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 */
 }

 #grad5
 {
 background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
 background: linear-gradient(red, green, blue); /* Standard syntax */
 }

 #grad6
 {
 /* For Safari 5.1 to 6.0 */
 background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Opera 11.1 to 12.0 */
 background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Fx 3.6 to 15 */
 background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* Standard syntax */
 background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
 }

 #grad7
 {
 background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
 background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
 background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
 background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
 }

 #grad8
 {
 /* Safari 5.1 to 6.0 */
 background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
 /* Opera 11.1 to 12.0 */
 background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
 /* Firefox 3.6 to 15 */
 background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
 /* Standard syntax */
 background: repeating-linear-gradient(red, yellow 10%, green 20%);
 }

 #grad9
 {
 background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
 background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
 background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
 background: radial-gradient(red, green, blue); /* Standard syntax */
 }

 #grad10
 {
 background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
 background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
 background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
 background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
 }


 </style>
 </head>
 <body>

 <h3>Linear Gradient - Top to Bottom</h3>
 <p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>

 <div id="grad1"></div>

 <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#grad1
	{
	height:200px;
	background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
	background: linear-gradient(red, blue); /* Standard syntax (must be last) */
	}

	#grad2
	{
	background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, red , blue); /* Standard syntax */
	}

	#grad3
	{
	background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
	}

	#grad4
	{
	background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
	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 */
	}

	#grad5
	{
	background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
	background: linear-gradient(red, green, blue); /* Standard syntax */
	}

	#grad6
	{
	/* For Safari 5.1 to 6.0 */
	background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
	/* For Opera 11.1 to 12.0 */
	background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
	/* For Fx 3.6 to 15 */
	background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
	/* Standard syntax */
	background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
	}

	#grad7
	{
	background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /Safari 5.1-6/
	background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /Opera 11.1-12/
	background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /Fx 3.6-15/
	background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /Standard/
	}

	#grad8
	{
	/* Safari 5.1 to 6.0 */
	background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
	/* Opera 11.1 to 12.0 */
	background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
	/* Firefox 3.6 to 15 */
	background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
	/* Standard syntax */
	background: repeating-linear-gradient(red, yellow 10%, green 20%);
	}

	#grad9
	{
	background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
	background: radial-gradient(red, green, blue); /* Standard syntax */
	}

	#grad10
	{
	background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
	background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
	background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
	background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
	}


	</style>
	</head>
	<body>

	<h3>Linear Gradient - Top to Bottom</h3>
	<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>

	<div id="grad1"></div>

	<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

	</body>
	</html>