section {
	/*display:block;*/
}

div {
	width: 300px;
	height: 300px;
	margin-bottom : 50px;
}

/*
=============== DEGRADE LINEAIRE =====================================

Pour tous ils ont la même formule :
-moz- : mozilla firefox
-o- : opera
- ?

linear-gradient (
	direction, 
	couleurDebut pourcent, 
	couleurMilieu1 pourcent, 
	couleurMilieu2 pourcent, ..., couleurFin pourcent
);
- direction :
/ degré
/ left (en allant dans la direction gauche, donc commencer le dégradé par la droite !)
/ ...

- pourcent : 
/ rien
/ position en %


Mais pour Webkit (Safari), c'est une autre formule :

-webkit-gradient ( 
	type, 
	direction, 
	from(couleurDebut), 
	color-stop(couleurMilieu1), 
	color-stop(couleurMilieu2),
	..., 
	to(couleurFin) 
);
- type : 
/ linear
/ radial

- direction :
/ left top
/ left bottom
/ right top
/ right bottom

*/


#degrade1 {
	height: 50px;
	
	/*
	background-image:
	OU
	background:
	
	*/
	
	background-image: -webkit-gradient(linear, left top, right top, from(red), to(yellow));
	
	background-image: -webkit-linear-gradient(0deg, red, yellow);	
	background-image: -moz-linear-gradient(0deg,  red, yellow);
	background-image: linear-gradient(0deg,  red, yellow);
}

#degrade1bis {
	height: 50px;
	
	background-image: -webkit-gradient(linear, left top, right top, from(RGBa(255,0,0,1)), to(RGBa(255,0,0,0)));
	
	background-image: -webkit-linear-gradient(0deg, RGBa(255,0,0,1), RGBa(255,0,0,0));	
	background-image: -moz-linear-gradient(0deg, RGBa(255,0,0,1), RGBa(255,0,0,0));
	background-image: linear-gradient(0deg, RGBa(255,0,0,1), RGBa(255,0,0,0));
}


#degrade2 {
	background-image: -webkit-gradient(linear, left bottom, right top, from(red), to(yellow));
	
	background-image: -webkit-linear-gradient(45deg, yellow, red);
	background-image: -moz-linear-gradient(45deg, yellow, red);
	background-image: linear-gradient(45deg, yellow, red);
}

#degrade3 {
	height: 50px;
	
	background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.25, red), color-stop(0.75, yellow));
	
	background-image: -webkit-linear-gradient(left, yellow 25%, red 75%);
	background-image: -moz-linear-gradient(left, yellow 25%, red 75%);
	background-image: linear-gradient(left, yellow 25%, red 75%);
}

#degrade4 {
	height: 50px;
	
	background-image: -webkit-gradient(linear, left bottom, right bottom, from(red), color-stop(0.70, black), to(yellow));
	
	background-image: -webkit-linear-gradient(left, yellow, black 75%, red);
	background-image: -moz-linear-gradient(left, yellow, black 75%, red);
	background-image: linear-gradient(left, yellow, black 75%, red);
}

/*
=============== DEGRADE RADIAL FORMULE SIMPLE =====================================

Pour tous :

...-radial-gradient(couleurs)

- couleurs :
/ red, yellow : suite de couleurs séparées par une virgule

Pour Webkit (Safari) :

(Voir ci-dessous dans la formule détaillée)
*/

#degrade5 {
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 212, from(red), to(yellow));
	
	background-image: -webkit-radial-gradient(red, yellow);
	background-image: -moz-radial-gradient(red, yellow);
	background-image: radial-gradient(red, yellow);
}


/*
=============== DEGRADE RADIAL FORMULE DETAILLEE =====================================

Pour tous :

...-radial-gradient(pointOrigine, taille forme, couleurs)

- pointOrigine :
/ 50% 50% (centré dans la forme)
/ 150 10 (x=150px, y=10px)

- taille :
/ closest-side OU contain : dégradé s'étend jusqu'au côté le plus proche (et ne s'étend donc pas plus loin), donc entièrement contenu dans la balise conteneur
/ farthest-side OU contain : dégradé s'étend jusqu'au côté le plus éloigné
/ closest-corner : dégradé s'étend jusqu'au coin le plus proche
/ farthest-corner OU cover : dégradé s'étend jusqu'au coin le plus éloigné, donc couvre toute la balise conteneur

- forme :
/ circle
/ ellipse (proportionnelle à la taille de la balise conteneur)

- couleurs :
/ red, yellow : suite de couleurs séparées par une virgule

Pour Webkit (Safari) :

-webkit-gradient( radial, pointOrigine, rayonOrigine, pointFin, rayonFin, couleurs) :

- pointOrigine ou pointFin :
/ 50% 50% (centré dans la forme)
/ 150 10 (x=150px, y=10px)

- rayonOrigine ou rayonFin :
/ 20 (px de rayon)

- couleurs :
/ from(white)
/ to(silver)


*/


#degrade6 {
	background-image: -webkit-gradient(radial, 150 10, 20, 150 200, 50, from(white), to(silver));
}

#degrade7 {
	background-image: -webkit-gradient(radial, 150 10, 20, 150 200, 50, from(white), to(silver)), silver;
	/* silver : couleur de fond du rectangle */
	
}

#degrade8 {
	background-image: -webkit-gradient(radial, 25% 25%, 0, 25% 25%, 75, from(red), to(yellow));
	
	background-image: -webkit-radial-gradient(25% 25%, closest-side circle, red, yellow);
	background-image: -moz-radial-gradient(25% 25%, closest-side circle, red, yellow);
	background-image: radial-gradient(25% 25%, closest-side circle, red, yellow);
}

#degrade9 {
	height: 200px;
	
	background-image: -webkit-radial-gradient(25% 25%, closest-side ellipse, red, yellow);
	background-image: -moz-radial-gradient(25% 25%, closest-side ellipse, red, yellow);
	background-image: radial-gradient(25% 25%, closest-side ellipse, red, yellow);
}

#degrade10 {
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(red), to(yellow));
	
	background-image: -webkit-radial-gradient(50% 50%, contain circle, red, yellow);
	background-image: -moz-radial-gradient(50% 50%, contain circle, red, yellow);
	background-image: radial-gradient(50% 50%, contain circle, red, yellow);
}

#degrade11 {
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(RGBa(255,0,0,1)), to(RGBa(255,0,0,0)));
	
	background-image: -webkit-radial-gradient(50% 50%, contain circle, RGBa(255,0,0,1), RGBa(255,0,0,0));
	background-image: -moz-radial-gradient(50% 50%, contain circle, RGBa(255,0,0,1), RGBa(255,0,0,0));
	background-image: radial-gradient(50% 50%, contain circle, RGBa(255,0,0,1), RGBa(255,0,0,0));
}

#degrade12 {
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 212, from(red), to(yellow));
	
	background-image: -webkit-radial-gradient(50% 50%, cover circle, red, yellow);
	background-image: -moz-radial-gradient(50% 50%, cover circle, red, yellow);
	background-image: radial-gradient(50% 50%, cover circle, red, yellow);
}