The video titled "CSS Tutorial For Beginners 49 - CSS Gradients" is likely part of a beginner-level series aimed at teaching the basics of Cascading Style Sheets (CSS) for web design. In this tutorial, the focus is on introducing CSS gradients and how to use them to create visually appealing backgrounds and effects.
Gradients in CSS allow designers to smoothly transition between two or more colors, creating dynamic and visually appealing backgrounds or effects. In this tutorial, viewers can expect to learn about the different types of gradients available in CSS, including linear gradients and radial gradients. The tutorial may cover how to specify gradient colors, directions, angles, and sizes to achieve desired effects.
By following this tutorial, beginners can expand their CSS skills and gain practical knowledge on how to use gradients to enhance the visual appeal of their web pages. Understanding how to manipulate gradients using CSS empowers designers to create more engaging and modern-looking designs for their websites.
Show More Show Less 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 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
#Online Media
#Fashion & Style
#Programming
#Software
