- [Teacher] Hi, this is Chris Converse,
and in this episode, we'll explore creating
a glow effect for both text and HTML elements.
This technique makes use of the shadow properties of CSS,
and what's most interesting is that these effects
can be compounded on top of one another, allowing us
to create all kinds of lighting and shadow effects.
Now we'll be using this technique to create a neon effect
for the headline and the article element in this layout.
And if you'd like to follow along,
download the exercise files, and we'll begin
by opening the index.html file in a text editor.
And once you have the HTML file opened, let's also open
this up in a browser so we can see the layout so far.
And now in the browser, you'll see the article element here
with the rounded corner box and you'll see "Open all night!"
set here in an h1 tag, which we can see over here
in the HTML, and this is using a Google font.
Then we have an h2 tag, and our paragraph.
And now before we begin working in the CSS file,
let's add a class to our h1 tag so we can isolate
the elements in the CSS that will create
the glow effect from the regular type styles.
So let's come down here to the h1 tag in the HTML,
let's add a space, let's add a class, equal to,
two quotes, and we'll name this neon_text.
Then I'll come in here, copy the class name, save our HTML.
Let's go back to the exercise files, let's open up
style.css, and now inside here, let's scroll down.
After the h1 tag, let's hit a few Returns,
let's type a period, and then paste in our class name.
Then we'll put a space and put in our brackets.
Now to define the text-shadow,
we're going to use CSS shorthand style.
And the individual properties consist of:
the horizontal offset, which is referred to as the h-shadow;
the vertical offset, which is the v-shadow;
the blur-radius; and the color.
And now back in our CSS file inside of our neon_text class,
we'll type text-shadow, then a colon and a space.
So for the vertical offset, we'll set
negative two pixels, then a space.
For the vertical offset, we'll set
negative two pixels, then a space.
For the blur radius, we're going to set 10 pixels,
and for the color, we're going to specify white.
So that's a pound sign and three letter fs then a semicolon.
And now once you save this and look in the browser,
you'll now see that we have a shadow that is
negative two pixels vertical and negative two pixels
horizontal showing up in a white 10-pixel blur.
And so with that in place, what we're going to do now
is add another text-shadow on top of this property.
So inside of our text-shadow values,
let's come in here and, before the semicolon,
let's add a comma, and then a space,
and let's specify a second shadow.
So this one I want to set to two pixels on the x,
two pixels on the y, 10-pixel blur, and we're also
going to set this to white, so pound sign and three fs.
And so now in the browser, we can see that we have two
shadows that are being compounded on top of each other,
one that moved to the upper-left
and one that moved to the lower-right.
So now with these in place, let's go back to the CSS,
and when I use properties that we can compound,
I like to space these out a little bit
so I can see what's happening in CSS.
So I'm going to come in here and add a hard Return
after the colon, then after the first comma,
I'll hit another Return, and then I'll take the semicolon
and I'll put this on a line by itself.
Now I'll typically only do this temporarily
while I'm putting in all of my individual properties.
Once we're done, I'll go back and remove these
and just keep these as a solid block.
But as far as the browser's concerned, it doesn't
really care if we space out our CSS like this or not.
So now let's come in here and let's
add a comma after the second property.
Now for the next property, we're going to introduce some color.
So we're going to set zero on the x, space, zero on the y,
then a space, we're going to set a blur radius of 20 pixels,
and then we'll specify a pink color.
So that'll be pound sign, ff for red,
00 for green, and de for blue.
And now in the browser, we can just start
to see a little bit of pink showing up behind
the two white properties that we defined earlier.
So now I'll add a comma and get my cursor inside of here,
I'm going to duplicate this line, remove the ending comma,
let's come down here and change the 20 to a 40.
So now we have the second property of the pink,
and we get an overlap within the first 20 pixels,
which makes the first 20 pixels closest
to the white letters the darkest.
So now I'll come in here and
duplicate this three more times.
For the third property, we'll set this to 60.
For the fourth property, we'll set this to 80.
And for the fifth property, we'll set this to 100.
Then let's get the cursor after the
second pink property, let's add a comma,
let's add a comma after 60, a comma after 80.
So this basically works like an array.
Every one of these items has to be separated by a comma,
and for each item that shows up in the text-shadow,
these all get compounded on top of each other.
So with all of these properties in place, let's save
our work, and then in the browser, we'll see the
result of all of these individual pink shadows.
Now because we made this an individual class,
we can go back to the exercise files,
let's go back into the index.html file,
let's come in here and copy the class name from the h1,
and let's come in here and paste it inside of the h2.
By doing that, we can see that we can now apply
all of those glowing effects to the h2 element as well.
So I do think that looks a little strong,
so I'm going to come in here and remove that.
And now the other thing we want to do
is apply a glow to the article element.
So let's come up here and add a class,
let's set this equal to neon_box,
let's come in here and copy the name,
save our HTML, let's go back to the exercise files,
let's go back into our style.css file,
let's scroll down after our neon_text, type a period,
let's paste in the name neon_box, let's come in here,
and what we're going to do for this particular element
is use the box-shadow instead of text-shadow.
And now the CSS shorthand for box-shadow
is very similar to text-shadow.
We have our individual properties of the horizontal offset,
or the h-shadow; the vertical offset, or the v-shadow;
we have a blur; and then we have a spread;
and then finally, the color.
And it's worth mentioning that both the box-shadow and
the text-shadow have an optional first property called the
inset property, and this can either be set to none, which
means we wouldn't specify it, inset, initial, or inherit.
And we're going to be using the inset
property here for the box-shadow.
So back in our CSS, inside of the neon class,
let's come in here and define box-shadow, colon, space.
First property is the horizontal offset, or the h-shadow.
We're going to set that to zero, space.
We're going to set zero for the vertical shadow.
Next, we're going to set five pixels for the blur.
We're not going to specify a spread, and then
we'll set the color to white, so pound sign
and three fs, then a semicolon.
So now in the browser, this might be hard to see,
but there is a very slight blur that we can see
in white around the edge of that element.
Now let's get our cursor inside of the properties
for box-shadow before the semicolon.
Let's add a comma, then a space.
Now we're going to use that optional property at the beginning.
So we're going to type inset, then a space,
and we're going to specify zero, space, zero, space,
five pixels for the blur, space, and then
a pound sign and three fs for white.
So now again, this might be hard to see in the video,
but there is now a blur on the inside of this element
in addition to a blur on the outside of that element.
Now back in the CSS file, I'm just going to
format this a little bit like we did before.
So let's add a few Returns after the commas,
put the semicolon on its own line.
So then after our second property, let's add a comma,
then a Return, we're going to set zero for the horizontal
and vertical shadows, then a space, we're going to set
a 20-pixel blur, then a space, then we're going to specify
that same pink color, so pound sign, ff00de.
And then in the browser, you can see the pink
showing up again on the outside of the article.
So let's come in here, let's duplicate this line,
let's add a comma, and on the second property
for the pink shadow, let's add inset to the beginning.
And again, over in the preview, we can now see that the pink
is on the inside of the article in addition to the outside.
So with these in place, we're going to add two more properties,
but we're going to use the spread property as well
in order to make this effect a little bit stronger.
So add a comma on the next line, and again we'll set
zero on the horizontal and vertical, we'll set the
blur to 20 pixels, then a space, and then we'll set
a two-pixel spread, and then the same pink color, ff00de.
Now in the browser, we can see a much stronger
shadow on the outside of that element.
And just like before, let's duplicate
that pink shadow property, let's add a comma, let's go
over to the beginning, let's add inset to the beginning.
And with those in place, save your CSS,
reload in the browser, and you'll now see
that we have a consistent shadow on both the inside
and outside of the article element, giving us a very
similar glow or neon effect that we applied to the title.
Now if you'd like to watch more videos here in the library
on advanced techniques for styling type, check out
Chapter 1 of our course on creating an event countdown,
or Chapter 2 on creating a calculation tool with Angular.
These particular chapters focus on styling
type that's used in these web projects.
And so that concludes our brief look
at creating a glow or neon effect with CSS.
And as always, thanks for watching.