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