1
00:00:01.01 --> 00:00:02.04
- [Teacher] Hi, this is Chris Converse,

2
00:00:02.04 --> 00:00:04.04
and in this episode,
we'll explore creating

3
00:00:04.04 --> 00:00:07.09
a glow effect for both
text and HTML elements.

4
00:00:07.09 --> 00:00:10.08
This technique makes use of
the shadow properties of CSS,

5
00:00:10.08 --> 00:00:12.07
and what's most interesting
is that these effects

6
00:00:12.07 --> 00:00:15.05
can be compounded on top
of one another, allowing us

7
00:00:15.05 --> 00:00:18.03
to create all kinds of
lighting and shadow effects.

8
00:00:18.03 --> 00:00:20.06
Now we'll be using this
technique to create a neon effect

9
00:00:20.06 --> 00:00:23.03
for the headline and the
article element in this layout.

10
00:00:23.03 --> 00:00:24.08
And if you'd like to follow along,

11
00:00:24.08 --> 00:00:27.01
download the exercise
files, and we'll begin

12
00:00:27.01 --> 00:00:31.01
by opening the index.html
file in a text editor.

13
00:00:31.01 --> 00:00:33.07
And once you have the HTML
file opened, let's also open

14
00:00:33.07 --> 00:00:36.08
this up in a browser so we
can see the layout so far.

15
00:00:36.08 --> 00:00:38.08
And now in the browser, you'll
see the article element here

16
00:00:38.08 --> 00:00:42.00
with the rounded corner box and
you'll see "Open all night!"

17
00:00:42.00 --> 00:00:44.08
set here in an h1 tag,
which we can see over here

18
00:00:44.08 --> 00:00:48.03
in the HTML, and this
is using a Google font.

19
00:00:48.03 --> 00:00:51.01
Then we have an h2 tag, and our paragraph.

20
00:00:51.01 --> 00:00:53.03
And now before we begin
working in the CSS file,

21
00:00:53.03 --> 00:00:56.05
let's add a class to our
h1 tag so we can isolate

22
00:00:56.05 --> 00:00:58.03
the elements in the CSS that will create

23
00:00:58.03 --> 00:01:01.05
the glow effect from
the regular type styles.

24
00:01:01.05 --> 00:01:04.03
So let's come down here
to the h1 tag in the HTML,

25
00:01:04.03 --> 00:01:08.08
let's add a space, let's
add a class, equal to,

26
00:01:08.08 --> 00:01:16.05
two quotes, and we'll name this neon_text.

27
00:01:16.05 --> 00:01:21.06
Then I'll come in here, copy
the class name, save our HTML.

28
00:01:21.06 --> 00:01:24.00
Let's go back to the
exercise files, let's open up

29
00:01:24.00 --> 00:01:29.07
style.css, and now inside
here, let's scroll down.

30
00:01:29.07 --> 00:01:33.03
After the h1 tag, let's hit a few Returns,

31
00:01:33.03 --> 00:01:37.09
let's type a period, and
then paste in our class name.

32
00:01:37.09 --> 00:01:41.07
Then we'll put a space
and put in our brackets.

33
00:01:41.07 --> 00:01:43.01
Now to define the text-shadow,

34
00:01:43.01 --> 00:01:45.01
we're going to use CSS shorthand style.

35
00:01:45.01 --> 00:01:47.01
And the individual properties consist of:

36
00:01:47.01 --> 00:01:51.01
the horizontal offset, which
is referred to as the h-shadow;

37
00:01:51.01 --> 00:01:53.06
the vertical offset,
which is the v-shadow;

38
00:01:53.06 --> 00:01:56.03
the blur-radius; and the color.

39
00:01:56.03 --> 00:02:00.05
And now back in our CSS file
inside of our neon_text class,

40
00:02:00.05 --> 00:02:05.09
we'll type text-shadow,
then a colon and a space.

41
00:02:05.09 --> 00:02:07.06
So for the vertical offset, we'll set

42
00:02:07.06 --> 00:02:10.09
negative two pixels, then a space.

43
00:02:10.09 --> 00:02:12.02
For the vertical offset, we'll set

44
00:02:12.02 --> 00:02:14.09
negative two pixels, then a space.

45
00:02:14.09 --> 00:02:17.04
For the blur radius, we're
going to set 10 pixels,

46
00:02:17.04 --> 00:02:19.08
and for the color, we're
going to specify white.

47
00:02:19.08 --> 00:02:24.01
So that's a pound sign and three
letter fs then a semicolon.

48
00:02:24.01 --> 00:02:25.08
And now once you save this
and look in the browser,

49
00:02:25.08 --> 00:02:27.05
you'll now see that we
have a shadow that is

50
00:02:27.05 --> 00:02:30.00
negative two pixels vertical
and negative two pixels

51
00:02:30.00 --> 00:02:33.08
horizontal showing up in
a white 10-pixel blur.

52
00:02:33.08 --> 00:02:35.02
And so with that in place,
what we're going to do now

53
00:02:35.02 --> 00:02:39.06
is add another text-shadow
on top of this property.

54
00:02:39.06 --> 00:02:42.04
So inside of our text-shadow values,

55
00:02:42.04 --> 00:02:45.00
let's come in here and,
before the semicolon,

56
00:02:45.00 --> 00:02:47.07
let's add a comma, and then a space,

57
00:02:47.07 --> 00:02:50.03
and let's specify a second shadow.

58
00:02:50.03 --> 00:02:53.04
So this one I want to set
to two pixels on the x,

59
00:02:53.04 --> 00:02:57.06
two pixels on the y,
10-pixel blur, and we're also

60
00:02:57.06 --> 00:03:03.02
going to set this to white,
so pound sign and three fs.

61
00:03:03.02 --> 00:03:04.08
And so now in the browser,
we can see that we have two

62
00:03:04.08 --> 00:03:07.05
shadows that are being
compounded on top of each other,

63
00:03:07.05 --> 00:03:09.00
one that moved to the upper-left

64
00:03:09.00 --> 00:03:11.05
and one that moved to the lower-right.

65
00:03:11.05 --> 00:03:13.09
So now with these in place,
let's go back to the CSS,

66
00:03:13.09 --> 00:03:15.09
and when I use properties
that we can compound,

67
00:03:15.09 --> 00:03:17.04
I like to space these out a little bit

68
00:03:17.04 --> 00:03:20.02
so I can see what's happening in CSS.

69
00:03:20.02 --> 00:03:22.06
So I'm going to come in
here and add a hard Return

70
00:03:22.06 --> 00:03:26.01
after the colon, then
after the first comma,

71
00:03:26.01 --> 00:03:29.01
I'll hit another Return, and
then I'll take the semicolon

72
00:03:29.01 --> 00:03:31.07
and I'll put this on a line by itself.

73
00:03:31.07 --> 00:03:33.04
Now I'll typically only
do this temporarily

74
00:03:33.04 --> 00:03:36.03
while I'm putting in all of
my individual properties.

75
00:03:36.03 --> 00:03:38.00
Once we're done, I'll
go back and remove these

76
00:03:38.00 --> 00:03:40.03
and just keep these as a solid block.

77
00:03:40.03 --> 00:03:41.07
But as far as the browser's
concerned, it doesn't

78
00:03:41.07 --> 00:03:45.01
really care if we space out
our CSS like this or not.

79
00:03:45.01 --> 00:03:46.02
So now let's come in here and let's

80
00:03:46.02 --> 00:03:49.03
add a comma after the second property.

81
00:03:49.03 --> 00:03:52.02
Now for the next property, we're
going to introduce some color.

82
00:03:52.02 --> 00:03:55.08
So we're going to set zero on
the x, space, zero on the y,

83
00:03:55.08 --> 00:03:59.01
then a space, we're going to
set a blur radius of 20 pixels,

84
00:03:59.01 --> 00:04:01.06
and then we'll specify a pink color.

85
00:04:01.06 --> 00:04:04.00
So that'll be pound sign, ff for red,

86
00:04:04.00 --> 00:04:07.08
00 for green, and de for blue.

87
00:04:07.08 --> 00:04:09.02
And now in the browser, we can just start

88
00:04:09.02 --> 00:04:11.02
to see a little bit of
pink showing up behind

89
00:04:11.02 --> 00:04:14.02
the two white properties
that we defined earlier.

90
00:04:14.02 --> 00:04:17.04
So now I'll add a comma and
get my cursor inside of here,

91
00:04:17.04 --> 00:04:21.06
I'm going to duplicate this
line, remove the ending comma,

92
00:04:21.06 --> 00:04:25.04
let's come down here and
change the 20 to a 40.

93
00:04:25.04 --> 00:04:27.06
So now we have the second
property of the pink,

94
00:04:27.06 --> 00:04:30.06
and we get an overlap
within the first 20 pixels,

95
00:04:30.06 --> 00:04:32.03
which makes the first 20 pixels closest

96
00:04:32.03 --> 00:04:36.00
to the white letters the darkest.

97
00:04:36.00 --> 00:04:36.08
So now I'll come in here and

98
00:04:36.08 --> 00:04:40.08
duplicate this three more times.

99
00:04:40.08 --> 00:04:44.01
For the third property,
we'll set this to 60.

100
00:04:44.01 --> 00:04:46.06
For the fourth property,
we'll set this to 80.

101
00:04:46.06 --> 00:04:51.00
And for the fifth property,
we'll set this to 100.

102
00:04:51.00 --> 00:04:52.04
Then let's get the cursor after the

103
00:04:52.04 --> 00:04:55.03
second pink property, let's add a comma,

104
00:04:55.03 --> 00:04:58.08
let's add a comma after
60, a comma after 80.

105
00:04:58.08 --> 00:05:00.07
So this basically works like an array.

106
00:05:00.07 --> 00:05:03.09
Every one of these items has
to be separated by a comma,

107
00:05:03.09 --> 00:05:07.03
and for each item that
shows up in the text-shadow,

108
00:05:07.03 --> 00:05:10.02
these all get compounded
on top of each other.

109
00:05:10.02 --> 00:05:12.01
So with all of these
properties in place, let's save

110
00:05:12.01 --> 00:05:13.09
our work, and then in the
browser, we'll see the

111
00:05:13.09 --> 00:05:17.00
result of all of these
individual pink shadows.

112
00:05:17.00 --> 00:05:18.09
Now because we made this
an individual class,

113
00:05:18.09 --> 00:05:21.08
we can go back to the exercise files,

114
00:05:21.08 --> 00:05:24.07
let's go back into the index.html file,

115
00:05:24.07 --> 00:05:28.08
let's come in here and copy
the class name from the h1,

116
00:05:28.08 --> 00:05:31.08
and let's come in here and
paste it inside of the h2.

117
00:05:31.08 --> 00:05:33.05
By doing that, we can
see that we can now apply

118
00:05:33.05 --> 00:05:37.06
all of those glowing effects
to the h2 element as well.

119
00:05:37.06 --> 00:05:38.09
So I do think that looks a little strong,

120
00:05:38.09 --> 00:05:42.02
so I'm going to come in
here and remove that.

121
00:05:42.02 --> 00:05:43.02
And now the other thing we want to do

122
00:05:43.02 --> 00:05:46.05
is apply a glow to the article element.

123
00:05:46.05 --> 00:05:49.08
So let's come up here and add a class,

124
00:05:49.08 --> 00:05:55.04
let's set this equal to neon_box,

125
00:05:55.04 --> 00:05:57.05
let's come in here and copy the name,

126
00:05:57.05 --> 00:06:00.08
save our HTML, let's go
back to the exercise files,

127
00:06:00.08 --> 00:06:04.08
let's go back into our style.css file,

128
00:06:04.08 --> 00:06:09.02
let's scroll down after our
neon_text, type a period,

129
00:06:09.02 --> 00:06:13.07
let's paste in the name
neon_box, let's come in here,

130
00:06:13.07 --> 00:06:15.04
and what we're going to do
for this particular element

131
00:06:15.04 --> 00:06:18.05
is use the box-shadow
instead of text-shadow.

132
00:06:18.05 --> 00:06:21.00
And now the CSS shorthand for box-shadow

133
00:06:21.00 --> 00:06:23.03
is very similar to text-shadow.

134
00:06:23.03 --> 00:06:26.02
We have our individual properties
of the horizontal offset,

135
00:06:26.02 --> 00:06:30.00
or the h-shadow; the vertical
offset, or the v-shadow;

136
00:06:30.00 --> 00:06:33.00
we have a blur; and then we have a spread;

137
00:06:33.00 --> 00:06:35.03
and then finally, the color.

138
00:06:35.03 --> 00:06:37.07
And it's worth mentioning
that both the box-shadow and

139
00:06:37.07 --> 00:06:40.08
the text-shadow have an optional
first property called the

140
00:06:40.08 --> 00:06:44.08
inset property, and this can
either be set to none, which

141
00:06:44.08 --> 00:06:49.07
means we wouldn't specify it,
inset, initial, or inherit.

142
00:06:49.07 --> 00:06:51.00
And we're going to be using the inset

143
00:06:51.00 --> 00:06:54.00
property here for the box-shadow.

144
00:06:54.00 --> 00:06:57.07
So back in our CSS,
inside of the neon class,

145
00:06:57.07 --> 00:07:02.08
let's come in here and define
box-shadow, colon, space.

146
00:07:02.08 --> 00:07:06.03
First property is the horizontal
offset, or the h-shadow.

147
00:07:06.03 --> 00:07:08.06
We're going to set that to zero, space.

148
00:07:08.06 --> 00:07:11.03
We're going to set zero
for the vertical shadow.

149
00:07:11.03 --> 00:07:14.07
Next, we're going to set
five pixels for the blur.

150
00:07:14.07 --> 00:07:17.04
We're not going to
specify a spread, and then

151
00:07:17.04 --> 00:07:20.02
we'll set the color to
white, so pound sign

152
00:07:20.02 --> 00:07:25.03
and three fs, then a semicolon.

153
00:07:25.03 --> 00:07:27.01
So now in the browser,
this might be hard to see,

154
00:07:27.01 --> 00:07:29.06
but there is a very slight
blur that we can see

155
00:07:29.06 --> 00:07:33.01
in white around the edge of that element.

156
00:07:33.01 --> 00:07:35.09
Now let's get our cursor
inside of the properties

157
00:07:35.09 --> 00:07:38.07
for box-shadow before the semicolon.

158
00:07:38.07 --> 00:07:42.00
Let's add a comma, then a space.

159
00:07:42.00 --> 00:07:45.04
Now we're going to use that
optional property at the beginning.

160
00:07:45.04 --> 00:07:48.02
So we're going to type
inset, then a space,

161
00:07:48.02 --> 00:07:53.01
and we're going to specify
zero, space, zero, space,

162
00:07:53.01 --> 00:07:55.09
five pixels for the blur, space, and then

163
00:07:55.09 --> 00:08:00.09
a pound sign and three fs for white.

164
00:08:00.09 --> 00:08:03.01
So now again, this might be
hard to see in the video,

165
00:08:03.01 --> 00:08:05.09
but there is now a blur on
the inside of this element

166
00:08:05.09 --> 00:08:10.01
in addition to a blur on
the outside of that element.

167
00:08:10.01 --> 00:08:11.06
Now back in the CSS
file, I'm just going to

168
00:08:11.06 --> 00:08:14.04
format this a little
bit like we did before.

169
00:08:14.04 --> 00:08:17.09
So let's add a few
Returns after the commas,

170
00:08:17.09 --> 00:08:20.02
put the semicolon on its own line.

171
00:08:20.02 --> 00:08:22.04
So then after our second
property, let's add a comma,

172
00:08:22.04 --> 00:08:24.09
then a Return, we're going to
set zero for the horizontal

173
00:08:24.09 --> 00:08:27.04
and vertical shadows, then
a space, we're going to set

174
00:08:27.04 --> 00:08:30.06
a 20-pixel blur, then a space,
then we're going to specify

175
00:08:30.06 --> 00:08:36.04
that same pink color,
so pound sign, ff00de.

176
00:08:36.04 --> 00:08:37.08
And then in the browser,
you can see the pink

177
00:08:37.08 --> 00:08:40.07
showing up again on the
outside of the article.

178
00:08:40.07 --> 00:08:43.02
So let's come in here,
let's duplicate this line,

179
00:08:43.02 --> 00:08:46.00
let's add a comma, and
on the second property

180
00:08:46.00 --> 00:08:49.08
for the pink shadow, let's
add inset to the beginning.

181
00:08:49.08 --> 00:08:52.03
And again, over in the preview,
we can now see that the pink

182
00:08:52.03 --> 00:08:56.02
is on the inside of the article
in addition to the outside.

183
00:08:56.02 --> 00:08:58.04
So with these in place, we're
going to add two more properties,

184
00:08:58.04 --> 00:09:00.07
but we're going to use the
spread property as well

185
00:09:00.07 --> 00:09:03.03
in order to make this effect
a little bit stronger.

186
00:09:03.03 --> 00:09:05.09
So add a comma on the next
line, and again we'll set

187
00:09:05.09 --> 00:09:08.08
zero on the horizontal and
vertical, we'll set the

188
00:09:08.08 --> 00:09:12.01
blur to 20 pixels, then a
space, and then we'll set

189
00:09:12.01 --> 00:09:19.09
a two-pixel spread, and then
the same pink color, ff00de.

190
00:09:19.09 --> 00:09:21.04
Now in the browser, we
can see a much stronger

191
00:09:21.04 --> 00:09:23.08
shadow on the outside of that element.

192
00:09:23.08 --> 00:09:25.00
And just like before, let's duplicate

193
00:09:25.00 --> 00:09:28.02
that pink shadow property,
let's add a comma, let's go

194
00:09:28.02 --> 00:09:32.00
over to the beginning, let's
add inset to the beginning.

195
00:09:32.00 --> 00:09:34.01
And with those in place, save your CSS,

196
00:09:34.01 --> 00:09:35.06
reload in the browser, and you'll now see

197
00:09:35.06 --> 00:09:37.09
that we have a consistent
shadow on both the inside

198
00:09:37.09 --> 00:09:40.06
and outside of the article
element, giving us a very

199
00:09:40.06 --> 00:09:45.05
similar glow or neon effect
that we applied to the title.

200
00:09:45.05 --> 00:09:47.07
Now if you'd like to watch
more videos here in the library

201
00:09:47.07 --> 00:09:50.02
on advanced techniques for
styling type, check out

202
00:09:50.02 --> 00:09:53.01
Chapter 1 of our course on
creating an event countdown,

203
00:09:53.01 --> 00:09:57.01
or Chapter 2 on creating a
calculation tool with Angular.

204
00:09:57.01 --> 00:09:58.09
These particular chapters focus on styling

205
00:09:58.09 --> 00:10:02.00
type that's used in these web projects.

206
00:10:02.00 --> 00:10:03.07
And so that concludes our brief look

207
00:10:03.07 --> 00:10:06.07
at creating a glow or
neon effect with CSS.

208
00:10:06.07 --> 00:10:09.06
And as always, thanks for watching.