0:00
Yo, what's going on guys? You're watching CSS for Beginners Lesson 49, and in this video
0:12
we're going to take a look at gradients. Alright so first things first, what the hell is a gradient? Well, I know many of you will
0:19
already know this, but for those that don't I want to quickly cover it here. Essentially
0:22
a gradient is a transition from one colour to another colour, or from a particular shade
0:27
of one colour to another particular shade of a colour, for example light to dark or
0:31
dark to light. In this example here we've gone from yellow to kind of a greeny colour
0:36
So that is a simple example of a gradient, okay? And that my friends is a linear gradient
0:42
because we're going straight down and there's many different types of gradient. I'm not
0:45
going to get into that now, I'm going to jump back into the code and we're going to learn how to code some linear gradients
0:53
Alright gang, I'm back here in the code and as you can see I've stripped everything out
0:56
and just added this simple A tag right here with a class of button and it says click me
1:01
A bit like Alice in Wonderland, except this is the web version, not eat me or drink me
1:05
click me. And then I've styled that button class right up here with a display block with
1:10
100 pixels, a panel of 12 pixels, give it a border of this kind of blue colour here
1:17
made some text adjustments, give it a colour of white, this font size of 14 pixels, border
1:23
radius and then this background of a light blue. So before we do anything I just want
1:28
to quickly show you what this looks like in a browser already. And it looks something
1:34
like that, so a nice little button there. But we want to get groovy and add a gradient
1:38
to it, make it look a little bit more funky and we'll do that right now
1:43
So the first thing we do is we come under the background and we keep, by the way, this
1:47
background property there as a fallback. Because if a particular old browser doesn't support
1:54
gradients because it's relatively new in terms of CSS properties, if it doesn't support the
1:59
gradient property then it will fall back to this background colour of light blue. So it's
2:04
no big deal. So to specify a gradient we simply write background again underneath this original
2:12
background here and we say we want a linear hyphen gradient. Now remember a linear gradient
2:18
is just a straight line, and this can be from top to bottom, left to right, etc. And we
2:25
give it these parentheses here and we're going to pass some values through in these brackets
2:30
Now the first thing we specify is the direction we want our gradient to run in. I'm going
2:35
to run it from top to bottom so I just simply write top and then the CSS knows that it's
2:41
going to start at the top and run to the bottom. Then I'm going to put a comma and I'm going
2:46
to put my original colour, the colour I want to start with, and I'm simply going to give
2:50
it a colour of this thing here, this light colour, which is AA and then four Ds, just
2:58
like that. And then I'll say 0% and what that there is saying is that I want it to start
3:04
the gradient at the very top, okay? So 0% from the top. And then I'll do a comma and
3:10
we're going to do our colour for the bottom, the colour that it's going to fade into. And
3:14
for this I'm just going to do a deeper shade of blue and I'll say 77, AA, AA. And then
3:21
that's going to be at 100% right at the bottom, right at the end I'm going to put my semicolon
3:26
So just to run through again, we've got our original background here to fall back on in
3:31
case the gradient property isn't supported. Then we're specifying another background here
3:36
so if the browser supports these gradients it's going to take this one instead of this
3:41
And we're saying we want a linear gradient which starts at the top. It's going to start
3:45
with this colour here and it starts 0% from the top and it's going to finish at this colour
3:51
here and it's going to finish at 100% from the top, right at the bottom. Okay, so I'll
3:56
save that now and let's view this in a browser. Refresh this. Right, and nothing has changed
4:04
Now, why isn't that? Well, it's because, like I say, the gradient property is still relatively
4:11
new and there are certain things we have to do so that browsers support it. Now, if we
4:16
jump back to the code, you'll remember from previous lessons I've talked briefly, very
4:23
briefly, about vendor prefixes. This is a prime example of when we need to use a vendor
4:29
prefix. Now, a vendor prefix is just a way of specifying a property so that certain browsers
4:36
can display that property. Okay, so the way we do this is copy this here. I'm just going
4:42
to paste it a couple of times. And we're going to start with this top one and the vendor
4:49
prefix I'm going to start with is just a simple hyphen, M-O-Z, and then a hyphen again and
4:55
that stands for Mozilla. And so in all Mozilla browsers, like Firefox, now that will be supported
5:02
And then I'm going to come underneath and I'm going to write hyphen WebKit. And this
5:07
is for things like Safari or Google Chrome. So now this will make those browsers support
5:13
the gradient property. And essentially what's happening is this. Your CSS is being loaded
5:18
into the browser. Remember the cascade runs from top to bottom. So it's coming in, it's
5:22
giving it all these properties. It gets to the background here and it's saying, okay
5:27
give it a background of this color, this solid color. And then it comes to this one down
5:30
below. Now, if this is in a browser that supports this here, this property, then it will apply
5:36
it. If not, it will stay this color. So either way, it moves down here. Now, if this is in
5:42
a browser which supports this property, like Google Chrome, it will give this as the background
5:49
If not, it will still go back to this or this. And finally, if no vendor prefixes are
5:55
needed and the browser automatically supports the linear gradient property, it's going to
5:59
come right down to the bottom and this background is going to overwrite them all and it will stick with this one. So it's a nice way to fall back on different options. So we'll save
6:07
this now and we'll view it in a browser. Let's just refresh that. And there we go. Now it's
6:13
running from quite light up here to darkish down here. So now it looks a bit cooler, a
6:18
bit more like a button. But I want to do one more thing. I want to come back in here
6:24
and I'm going to copy this rule and paste it underneath. And I'm going to give this
6:29
a hover effect because remember a lot of buttons on websites, they always have these hover
6:34
effects to make it look a bit more interactive. And we're going to copy and paste these things
6:39
right here. Okay. And we're going to change them a little bit. Now, I'm going to change
6:45
this background to this color here, 77888. And so if gradients are not supported whatsoever
6:53
in any of these browsers, then it will fall back to this color here. So we'll just have
6:58
a simple hover effect where it changes background color. If they do support the gradients, all
7:03
I want to do is change this top value to bottom. And we'll do that for each one. So now hopefully
7:11
this should switch the gradient around from top to bottom. So instead of starting at the
7:16
top and coming down darker, it's going to start at the bottom and go upwards darker
7:21
So let's save that and view this in a browser and refresh. And now if we hover, you can
7:27
see that the gradient is reversed when we hover, which is quite cool. Nice little button
7:31
there. All right, guys. So that just about covers gradients and puts it into a very small
7:37
nutshell. However, there's many things you can do with them. Lots of little things you
7:41
can change and properties you can mess around with. So what I suggest you do is check out
7:46
this website, colorzilla.com forward slash gradient hyphen editor. And this is a really
7:51
cool free gradient generator. And you can mess around with the values. They've got a
7:56
lot of presets here for different gradients. Or you can put your own colors in here. It's
8:01
very much like the Photoshop gradient tool. So if you're familiar with Photoshop, you're
8:06
going to find this a doddle. Otherwise, just take a few minutes to kind of go over this
8:10
It will generate all the code you need here for your gradients. And then you can just
8:15
copy that and paste it into your CSS. It does offer IE9 support there by giving you this
8:22
conditional code. So you can use that as well if you'd like. So yeah, have a good look at
8:27
that. And generally speaking, when I need to use a gradient that's not a simple one
8:32
I just come here, play around with this, get the gradient I want, and then paste it
8:36
into my code. Really cool. All right, so that's about it, guys, for this lesson. If you have
8:41
any questions whatsoever, please, please, please comment. I will answer all of those
8:46
If you like these videos, don't forget to subscribe. And I'll see you guys in the next one