- [Chris] Hi, this is Chris Converse,
and in this episode, we'll create some outlined text
for our webpage heading, complete with transparency
within the letter forms.
Now, at the time of this recording,
there are a few browsers on the Windows desktop platform
that don't support this technique.
And these are IE 11 and the Edge browser.
However, we'll set up the CSS
so that those browsers will show the text in a solid color.
So if you'd like to follow along,
download the exercise files,
and let's begin by opening the HTML file in a text editor.
So once you have the HTML file open,
you'll see that we have a pretty simple layout here.
In the body area, we have the header with an h1.
This is the heading that we're going
to be styling into outlined text.
And up in the head area, we have a link to style.css.
So to begin to create this effect,
let's go back to the exercise files.
Let's find style.css and open that in our text editor.
Let's scroll down a little bit.
Let's find the h1 rule.
Now after text-align: center, let's come in here
and let's first add a color property
to color the type white.
This way, browsers that don't support this effect
will show the type in white.
So we'll type color colon space, a pound sign,
and three Fs for white.
Save your CSS and you'll see the effect in the browser.
So now let's come in here and add the text stroking effect.
Now all of the browsers that support this support
the webkit flag for text fill color stroke and width.
So we'll start with a dash, then we'll type webkit,
then another dash, then text-fill-color, colon space.
And we're going to set the color to transparent.
So I'll type transparent then a semicolon.
Next we're going to set the stroke color.
So we'll type -webkit-text-stroke-color colon space.
We're going to set this to white, so a pound sign and three Fs.
And then finally we're going to set the stroke width.
So again we'll type -webkit-text-stroke-width colon space,
and we're going to set this to three pixels, then a semicolon.
So with this in place, hit save.
Go back to the browser.
And we'll now see the effect of having
a transparent fill color and a stroke color of white
and a stroke width of three pixels.
And now in the browsers that do support this effect,
which is most modern browsers,
you will see a slight difference in the appearance.
You'll see differences in both the stroke weight
as well as the outline orientation.
And as we discussed earlier, the Windows desktop platform
lacks support for both IE 11 and the Edge browser.
And so when using this technique,
be sure to set your client's expectations
in regards to this type effect.
And with that, I'll conclude this episode,
and as always, thanks for watching.