Wednesday, December 29, 2010
HTML5: CSS3 Gradients
Browser support for CSS gradients has been long time coming. Webkit and Mozilla engines have
working implementations for sometime now, IE used to have a hack using filters to achieve
background gradient. Starting with IE9, Microsoft has removed the filter hack and gradients
don't work as of now, but looks like they'll add standards compatible support soon. For now
folks browsing this site using IE won't see the cloudy blue fade effect which uses CSS
gradient with stops. In theory you can use the radial gradient, but so far I haven't found
a good use case for it, somehow the glowing sun is not suitable for most of web content.
When setting background gradient make sure you set the height property for the element,
in my case I'm setting background gradient for the entire page so I set body height to 100%;
/* gradient using from and to colors */
background:-webkit-gradient(
linear,
left top,
left bottom,
from(#f0f7fb),
to(#dcecf6));
background:-moz-linear-gradient(
top,
#f0f7fb,
#dcecf6);
/* gradient using color stops */
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #ffffff),
color-stop(50%, #dcecf6),
color-stop(100%, #ffffff));
background:-moz-linear-gradient(
top,
#ffffff 0%,
#dcecf6 50%,
#ffffff 100%);
-- Baldeep Hira