Understanding CSS3 Gradients

Refer here for the full tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding...

The process of creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we'll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.

Category:

Education

Tags:

• nettuts
• web design
• css
• css3
• gradients
• web development

[All4Uproductions]

You can also do -webkit-linear-gradient.

[nietzsche011]

Thank you so much peace from marrakech

[Roodper]

Check this out goo.gl /4kbQZ

[zangoheyho]

subbed ;)

[xiaoxindiar]

This only seems to work for fixed sized elements or, if used on the body, the visible part of the page in the browser's viewport. If you have to scroll down, the gradient simply repeats.

If you specify no repeat for the background, you see the gradient then what ever the specified background color is. Even with html and body height set to 100%, I can't resolve. Anyone find out how to get the gradient to go the whole length of a scrollable page?

[Swordmaster146]

Actually they do on IE9 browser - I am not on computer now, but if I remember right, some CSS IE codes used -ms- but you should try yourself. Nice tutorial!

[theapeman10]

it bloody silly that Css3 had been out for so long and yet there still inventing different markup - I thought the whole point of lessons learned was to use the same markup - isn't that the whole point of having CSS standards - CSS standards body is a useless excuse, they should say implement an agreeded gradient markup X,Y,Z - Where would the web be if everyone had their own version of HTML

[jay11284]

@windowsphonepro CSS gradients don't work with Internet explorer yet to the dismay of many designers.

[maximumrfan]

@windowsphonepro You would use the official code.

For border radius you would use border-radius, for box shadows you would use box-shadow, etc.

[windowsphonepro]

Would I need to use the Firefox code or the WebKit code for IE9?