CSS 3 Gradient without image

No comments
The CSS 3 gradient syntax is the only one that is different for different browsers. the one used by FireFox seems to be the easiest.

.box_gradient
{
/* FireFox 3.6 */
background-image: -moz-linear-gradient(top, #444444, #999999);
/* Safari4+, Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
/* IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
}

.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;

/* fallback image */
background-image: url(images/fallback-gradient.png);

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
}

No comments :

Post a Comment