Creating Gradient Line Breaks

[00:00:00]
>> Okay, so let's move on to make our color bars, and that is going to start with a gradient. So here in our instructions, so we are still in Chapter 4. We are down now on Part 3, which is called adding lines in between sections. So how do we get this cool gradient?

[00:00:26]
They look like borders, don't they? So my first approach to this was to try using the border property, but you need to have a gradient associated with it. So the regular old border property will let you assign a color to it. So I can make a one pixel solid red border.

[00:00:44]
That's straightforward enough to do. But to implement a gradient, you can use a property called border-image. And that will allow you to plug in a gradient. Unfortunately, it works great in Firefox, it works great in Chrome. But in Safari it will not put it on one side of your element, it will put it on all four sides.

[00:01:05]
So in other words, you'll wind up with a box of gradient as opposed to a line of gradient. So the way I wound up having to solve this was to use a div, create my gradient, and set that as the background for that div. And then give it a very small height so that it looks like a line.

[00:01:24]
That was the solution that I came up with that wound up working across browsers. So the first step in that process is to generate the gradient. And there are lots of websites you can go to to generate a CSS gradient, but I've chosen cssgradient.io. If you have another site you like, feel free to use it.

[00:01:44]
And here what we're going to do is generate a gradient. And I've given you the two colors that this particular gradient uses. You're welcome to choose other colors, if you like. So I think this one is the pinkish magenta color. So let's just plug that in, copy, paste there.

[00:02:09]
And then we have another color here. This is the aqua color, copy and paste it there. Okay, so the way this particular website works, it's gonna show you what the gradient looks like up here at the top of the page. So right now what we have going on is a radial gradient.

[00:02:30]
So it's actually more of a circle. Your mileage may vary, by the way. I use this site a lot, and I was creating a radial gradient for something else a little while ago. I'm gonna switch it back over to linear. Linear is gonna treat it, obviously, more like a line.

[00:02:47]
And we have two color stops here. We have one at 35, so, in other words make it solid magenta until we get to the 35, which is just sort of a number on a scale of 1 to 100 or 0 to 100. Then between 35 and 68, we're gonna make the gradient happen, go from one color to the other.

[00:03:06]
And then 68 and higher, we're gonna make it all the aqua color. I actually don't want that. So we can just slide these points all the way out to the end, 0 and 100. And then the last part of this is the angle. So down here in the interface, it says 353 degrees, which is great.

[00:03:27]
What I actually want, though, is 90 degrees. The reason I want it at 90 degrees is because I have a very narrow height and I want to have my color bar go from pink to aqua on the page. And I want the whole gradient to be visible. If I do a very small height and I have a funky line going on, who knows how much of the gradient is actually gonna show up inside of that?

[00:03:52]
All right, so once you have set this up, this will give you the CSS down here at the bottom. So it's giving you two lines of CSS. One line is just a solid color. That's a fallback for older browsers that may not be able to implement a CSS gradient.

[00:04:09]
My understanding is that most browsers are pretty good at CSS gradients at this point in time. So I am just gonna copy this second line of code here. And that is the code for the gradient that we just created there in the interface. Okay, so we'll copy that line of code.

[00:04:26]
And we will go over here to our styles.css. And I'm gonna scroll back on up in my style sheet, back where it says background color divs. It's probably a good place to put it to keep things organized. And I am going to create a class called gradient. Cuz like I said, I'm super creative that way.

[00:04:50]
I'm gonna give the gradient that thing that I just copied from the color gradient website. And I'm gonna assign out a height of 2 pixels, okay? So a div with a class of gradient is gonna have a height of 2 pixels and it will have that gradient associated with it.

[00:05:09]
And then all I have to do, after I save my CSS, is drop in those divs into my document. So where are those color gradient lines gonna go? They are going to go after the navigation, after the intro. So here, between the intro and the contact, we'll add a div here.

[00:05:36]
Class=gradient /div, okay? Why div? Because we want a block level element that will stretch all the way across the page. And div is meaningless. There's no semantic value associated with a div. It's gonna go in here. Its whole purpose in life is to hold that class and to be 2 pixels size so it'll look cool, that's it.

[00:06:04]
All right, so, I'm gonna copy that. And before I go crazy and put all of them in, let's just take a quick peek at our webpage. So make sure your CSS and your HTML are saved. And refresh your web page, and you should have a cool gradient line showing up here now in between your introduction and your contact.

[00:06:25]
All right, so let's add the last one and that's gonna go in between your contact and your footer. So we'll drop in another div with a class of gradient right there. And I think that's all of the ones we have at the moment. So either side of the contact, basically.

[00:06:45]
I mean, this webpage is almost done, right? All that's left is the hard part. You're doing great.