1
00:00:01.07 --> 00:00:03.07
- [Chris] Hi, this is Chris
Converse and in this episode,

2
00:00:03.07 --> 00:00:05.06
we'll style a horizontal rule element

3
00:00:05.06 --> 00:00:08.01
with CSS in order to
create a fading effect

4
00:00:08.01 --> 00:00:09.05
on the right and left sides.

5
00:00:09.05 --> 00:00:10.09
So, if you'd like to follow along,

6
00:00:10.09 --> 00:00:12.03
download the exercise files

7
00:00:12.03 --> 00:00:14.05
and let's begin by opening the HTML file

8
00:00:14.05 --> 00:00:16.04
in your favorite text editor

9
00:00:16.04 --> 00:00:18.05
and when you have the HTML file open,

10
00:00:18.05 --> 00:00:20.03
up in the head area, you'll see a link

11
00:00:20.03 --> 00:00:23.07
to style that CSS, we'll be
opening this in a moment.

12
00:00:23.07 --> 00:00:25.07
If we continue down, we
have an article element

13
00:00:25.07 --> 00:00:29.01
and inside of the article
element, we have two H2 elements

14
00:00:29.01 --> 00:00:31.00
and two paragraph elements.

15
00:00:31.00 --> 00:00:33.09
And so what we're going to
do to begin in the HTML file

16
00:00:33.09 --> 00:00:36.07
is add a horizontal rule, so
that'll be a less than sign,

17
00:00:36.07 --> 00:00:40.06
HR, then a greater than sign,
and we're going to add this

18
00:00:40.06 --> 00:00:42.02
before the second h2 tag.

19
00:00:42.02 --> 00:00:44.06
So, with that in place, save your HTML,

20
00:00:44.06 --> 00:00:46.09
let's go back to the exercise files,

21
00:00:46.09 --> 00:00:48.07
let's find style.css,

22
00:00:48.07 --> 00:00:50.08
let's open this in our text editor,

23
00:00:50.08 --> 00:00:54.09
let's scroll down, after
the rule that targets

24
00:00:54.09 --> 00:00:56.08
the paragraph elements,

25
00:00:56.08 --> 00:00:58.07
let's come in here and add a new rule

26
00:00:58.07 --> 00:01:00.05
that's going to target the HR element.

27
00:01:00.05 --> 00:01:03.08
So, I'll type hr and then a
space, add in our brackets,

28
00:01:03.08 --> 00:01:05.03
and set a few returns.

29
00:01:05.03 --> 00:01:08.01
Inside, let's begin by
adding some margin properties

30
00:01:08.01 --> 00:01:11.05
and we'll set 30 pixels
for the top and bottom

31
00:01:11.05 --> 00:01:15.03
then a space then 15% for
the right and left value.

32
00:01:15.03 --> 00:01:17.01
Next, let's set a height.

33
00:01:17.01 --> 00:01:21.00
We're going to set this to three pixels.

34
00:01:21.00 --> 00:01:24.00
Next line, let's set a border.

35
00:01:24.00 --> 00:01:26.07
Let's set this to zero.

36
00:01:26.07 --> 00:01:29.05
This will get rid of
the inset border shadow

37
00:01:29.05 --> 00:01:32.00
that we have by default in most browsers.

38
00:01:32.00 --> 00:01:34.08
And then next we'll set some
background image properties.

39
00:01:34.08 --> 00:01:39.07
So, type background-image:

40
00:01:39.07 --> 00:01:44.02
and then we'll type linear-gradient

41
00:01:44.02 --> 00:01:47.07
beginning and ending
parenthesis and then a semicolon

42
00:01:47.07 --> 00:01:50.09
and then let's come in here
and split the parenthesis open

43
00:01:50.09 --> 00:01:52.05
because we're going to
add a couple of properties

44
00:01:52.05 --> 00:01:54.07
inside of here.

45
00:01:54.07 --> 00:01:58.05
So, what we're going to do is
we're going to set to space right,

46
00:01:58.05 --> 00:02:01.02
this will set the
direction of the gradient,

47
00:02:01.02 --> 00:02:02.09
then a comma.

48
00:02:02.09 --> 00:02:05.04
On the next line we're
going to set the color,

49
00:02:05.04 --> 00:02:08.03
we're going to use the rgba color space.

50
00:02:08.03 --> 00:02:11.01
So, rgba, beginning
and ending parenthesis,

51
00:02:11.01 --> 00:02:14.01
then a comma, inside of the
parenthesis we're going to set

52
00:02:14.01 --> 00:02:17.06
white which is 255 for red
comma 255 for green comma 255

53
00:02:17.06 --> 00:02:22.06
for blue comma then a 0
so that we have no color

54
00:02:22.06 --> 00:02:25.07
for the beginning.

55
00:02:25.07 --> 00:02:28.07
Then we'll come in here,
copy this entire line,

56
00:02:28.07 --> 00:02:32.01
paste it on the next line, the next line,

57
00:02:32.01 --> 00:02:34.01
and then finally the last line,

58
00:02:34.01 --> 00:02:36.04
so we'll have four copies
of this color property.

59
00:02:36.04 --> 00:02:39.06
For the last one we'll remove the comma

60
00:02:39.06 --> 00:02:41.01
and then for the second color property,

61
00:02:41.01 --> 00:02:43.05
we're going to set the output of .5,

62
00:02:43.05 --> 00:02:45.09
then we'll do the same thing
for the third color property

63
00:02:45.09 --> 00:02:49.01
and for the fourth one,
we'll leave this at zero.

64
00:02:49.01 --> 00:02:50.02
So, with these rules in place,

65
00:02:50.02 --> 00:02:52.07
we'll hit Save then go
back over to the browser

66
00:02:52.07 --> 00:02:54.08
and we'll now see the new
background image property

67
00:02:54.08 --> 00:02:57.05
being defined inside
of the horizontal rule

68
00:02:57.05 --> 00:02:59.08
and on the left hand side
we start this at zero

69
00:02:59.08 --> 00:03:01.04
which is this property here.

70
00:03:01.04 --> 00:03:03.08
On the right hand side,
we end this with zero,

71
00:03:03.08 --> 00:03:06.04
which is this property here,
and we go up to a maximum

72
00:03:06.04 --> 00:03:09.09
of .5 in the center and
so now in the browser

73
00:03:09.09 --> 00:03:12.07
we have a gradient rule that is 50% white

74
00:03:12.07 --> 00:03:14.09
and fades off to 0% transparency

75
00:03:14.09 --> 00:03:17.02
on both the right and left edges.

76
00:03:17.02 --> 00:03:19.00
And so with that, I'll
conclude this episode

77
00:03:19.00 --> 00:03:22.00
and, as always, thanks for watching.