- [Chris] Hi, this is Chris Converse and in this episode,
we'll style a horizontal rule element
with CSS in order to create a fading effect
on the right and left sides.
So, if you'd like to follow along,
download the exercise files
and let's begin by opening the HTML file
in your favorite text editor
and when you have the HTML file open,
up in the head area, you'll see a link
to style that CSS, we'll be opening this in a moment.
If we continue down, we have an article element
and inside of the article element, we have two H2 elements
and two paragraph elements.
And so what we're going to do to begin in the HTML file
is add a horizontal rule, so that'll be a less than sign,
HR, then a greater than sign, and we're going to add this
before the second h2 tag.
So, with that in place, save your HTML,
let's go back to the exercise files,
let's find style.css,
let's open this in our text editor,
let's scroll down, after the rule that targets
the paragraph elements,
let's come in here and add a new rule
that's going to target the HR element.
So, I'll type hr and then a space, add in our brackets,
and set a few returns.
Inside, let's begin by adding some margin properties
and we'll set 30 pixels for the top and bottom
then a space then 15% for the right and left value.
Next, let's set a height.
We're going to set this to three pixels.
Next line, let's set a border.
Let's set this to zero.
This will get rid of the inset border shadow
that we have by default in most browsers.
And then next we'll set some background image properties.
So, type background-image:
and then we'll type linear-gradient
beginning and ending parenthesis and then a semicolon
and then let's come in here and split the parenthesis open
because we're going to add a couple of properties
inside of here.
So, what we're going to do is we're going to set to space right,
this will set the direction of the gradient,
then a comma.
On the next line we're going to set the color,
we're going to use the rgba color space.
So, rgba, beginning and ending parenthesis,
then a comma, inside of the parenthesis we're going to set
white which is 255 for red comma 255 for green comma 255
for blue comma then a 0 so that we have no color
for the beginning.
Then we'll come in here, copy this entire line,
paste it on the next line, the next line,
and then finally the last line,
so we'll have four copies of this color property.
For the last one we'll remove the comma
and then for the second color property,
we're going to set the output of .5,
then we'll do the same thing for the third color property
and for the fourth one, we'll leave this at zero.
So, with these rules in place,
we'll hit Save then go back over to the browser
and we'll now see the new background image property
being defined inside of the horizontal rule
and on the left hand side we start this at zero
which is this property here.
On the right hand side, we end this with zero,
which is this property here, and we go up to a maximum
of .5 in the center and so now in the browser
we have a gradient rule that is 50% white
and fades off to 0% transparency
on both the right and left edges.
And so with that, I'll conclude this episode
and, as always, thanks for watching.