Tuesday, February 7, 2012

CSS background gradient


For Internet Explorer:
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55aaee', endColorstr='#003366');
 For Webkit Browsers, such as Safari, Chrome
 background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
For FireFox 3.6+:
 background: -moz-linear-gradient(top, #55aaee, #003366);
Example:
 <style type="text/css">
.container-grd {
/* default background colour */
background: #2a6da9;

/* gecko based browsers */
background: -moz-linear-gradient(top, #55aaee, #003366);

/* webkit based browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366)); 
/*IE based browser */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55aaee', endColorstr='#003366');

}
</style>
 In HTML


<div class="container-grd">
Test my blue gradient</br>
Test <br>
Test
</div>



Test my blue gradient


Test


Test
Reference:
 http://webdesignerwall.com/tutorials/cross-browser-css-gradient
 http://www.tankedup-imaging.com/css_dev/css-gradient.html

1 comment:

  1. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
    youtube html5 player| html5 converter

    ReplyDelete