HTML5 and CSS3 beginners tutorial 30 - linear gradient

In this tutorial I show you how to use the linear gradient property to create background gradients in CSS3.

Don't forget to subscribe:
-------------------------------------------------------------
Add me on twitter:

facebook group:
-------------------------------------------------------------

[amireerbaker]

Very nice and extremely helpful. Thanks!!!

[fatimahal-khateeb]

Thank you your displaying was so clear & understood

[prakritikghimire]

Thank you Quentin Watt ! your Step is Awesome !!!

[prakashpathak]

thanks dude for this its very much helpful for me.Hope you 'll bring more such easy and helpful tuts.Like all your tuts very much

[djleisheng]

Just a tip if you are using div's or li's to make your menu, you can make the text inside non-selectable like this:
Make a class called .noselect

.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Then just make a div or li with two classes: <div class="rounded_box noselect">Menu Item</div>

[baxydude]

Great tutorials! Thank you. Keep making them plz

[albertgrennan]

Your videos are great! easy to follow and understand !! do you have JS also? I hope so

[tommoran]

Life is awesome when you just add a litttle bit of

[UnknownUser]

No need for background-image: linear-gradient(...);
background: linear-gradient(...); is enough and correct // without -image

CSS3 defines two types of gradients:
Linear Gradients (goes
Radial Gradients (defined by their center) // not mentioned in this tutorial

Just to let others know.

[harshaleo]

Is hexadecimal color code compulsory to use lineqar gradient? Or can we use standard colors?

[ICeeeJI]

May I ask you why you haven't covered as many topics in this tutorial series as you did in your last series? Like the float/clear tutorial or the tutorials about tables?

Are there still more tutorials coming for this? Or is there another reason they aren't involved in this series?

[aymira]

Hi Quentin.Do you get all 51 html and css tutorials code through Patron ?

[sandhyaranibairi]

Sir what photoshop software were you opening during the tutorial?

[jackwatson]

I thought that css wasn't white-space-sensitive but I mistakenly put a space before the parentheses at "background: linear-gradient (...)" and the gradient doesn't work. Is css white-space-sensitive in some situations, such as this?

[khosasarbjeet]

hello sir,
i want to ask u that how "vertical-align" in  text attributes work?

[jecours]

how to put the background image linear gradient working without going over my images ?

[hermez]

Quentin Watt can linear gradient be applied to text?

[Aleph-Zero]

I like to make it a little bit more dramatic, try:
top, green, blue, orange, red 85%);