My Developpement Blog

Code pour pouvoir gérer un dégradé linéaire.

CSS à utiliser

.test {
	height:300px;
	background: #FFF url(../img/test.svg);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType='0', StartColorStr='#f36421', EndColorStr='#f28829'); //IE
	background: -moz-linear-gradient(top, #f36421, #f28829); // navigateur utilisant Gecko
	background: -webkit-gradient(linear, left top, left bottom, from(#f36421), to(#f28829)); // navigateur utilisant Webkit
	}

Pour Opera, il faut utiliser une image SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
	<defs>
		<linearGradient id="gray" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" style="stop-color:rgb(243,100,33); stop-opacity:1"/>
			<stop offset="100%" style="stop-color:rgb(242,136,41); stop-opacity:1"/>
		</linearGradient>
	</defs>
 
	<rect style="fill:url(#gray)" x="0" y="0" width="100%" height="100%" rx="0"/>
</svg>

Source d’inspiration : Blog de Pascal Chevrel ainsi que le labs de Thomas Basseto. Merci à eux pour les informations récupérées