Understanding CSS3 Gradients

[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

[windowsphonepro]

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

[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.

[jay11284]

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

[gabrielpalofficial]

Great video, finally I understood the syntax. Thanks a lot.

[natal1711]

Good video. Subscribing. 

[powerphillg5]

I get stacked gradient backgrounds as if the repeat when styling the body background

[WaldYoko]

thanks man u´re awesome ;)

[ratnushock]

Another great quick tip Jeffrey, thank you very much.