1
00:00:01.08 --> 00:00:03.00
- [Chris] Hi, this is Chris Converse,

2
00:00:03.00 --> 00:00:05.02
and in this episode, we'll
create some outlined text

3
00:00:05.02 --> 00:00:07.05
for our webpage heading,
complete with transparency

4
00:00:07.05 --> 00:00:09.02
within the letter forms.

5
00:00:09.02 --> 00:00:10.04
Now, at the time of this recording,

6
00:00:10.04 --> 00:00:12.08
there are a few browsers on
the Windows desktop platform

7
00:00:12.08 --> 00:00:14.05
that don't support this technique.

8
00:00:14.05 --> 00:00:17.00
And these are IE 11 and the Edge browser.

9
00:00:17.00 --> 00:00:18.06
However, we'll set up the CSS

10
00:00:18.06 --> 00:00:21.09
so that those browsers will
show the text in a solid color.

11
00:00:21.09 --> 00:00:23.00
So if you'd like to follow along,

12
00:00:23.00 --> 00:00:24.05
download the exercise files,

13
00:00:24.05 --> 00:00:29.01
and let's begin by opening the
HTML file in a text editor.

14
00:00:29.01 --> 00:00:30.05
So once you have the HTML file open,

15
00:00:30.05 --> 00:00:32.09
you'll see that we have a
pretty simple layout here.

16
00:00:32.09 --> 00:00:36.01
In the body area, we have
the header with an h1.

17
00:00:36.01 --> 00:00:37.01
This is the heading that we're going

18
00:00:37.01 --> 00:00:39.04
to be styling into outlined text.

19
00:00:39.04 --> 00:00:42.08
And up in the head area, we
have a link to style.css.

20
00:00:42.08 --> 00:00:44.02
So to begin to create this effect,

21
00:00:44.02 --> 00:00:46.03
let's go back to the exercise files.

22
00:00:46.03 --> 00:00:50.09
Let's find style.css and
open that in our text editor.

23
00:00:50.09 --> 00:00:52.08
Let's scroll down a little bit.

24
00:00:52.08 --> 00:00:55.03
Let's find the h1 rule.

25
00:00:55.03 --> 00:00:57.04
Now after text-align:
center, let's come in here

26
00:00:57.04 --> 00:00:59.08
and let's first add a color property

27
00:00:59.08 --> 00:01:01.03
to color the type white.

28
00:01:01.03 --> 00:01:03.03
This way, browsers that
don't support this effect

29
00:01:03.03 --> 00:01:05.07
will show the type in white.

30
00:01:05.07 --> 00:01:09.01
So we'll type color colon
space, a pound sign,

31
00:01:09.01 --> 00:01:11.05
and three Fs for white.

32
00:01:11.05 --> 00:01:14.05
Save your CSS and you'll see
the effect in the browser.

33
00:01:14.05 --> 00:01:18.04
So now let's come in here and
add the text stroking effect.

34
00:01:18.04 --> 00:01:20.03
Now all of the browsers
that support this support

35
00:01:20.03 --> 00:01:25.05
the webkit flag for text
fill color stroke and width.

36
00:01:25.05 --> 00:01:30.05
So we'll start with a dash,
then we'll type webkit,

37
00:01:30.05 --> 00:01:39.01
then another dash, then
text-fill-color, colon space.

38
00:01:39.01 --> 00:01:43.05
And we're going to set
the color to transparent.

39
00:01:43.05 --> 00:01:46.06
So I'll type transparent then a semicolon.

40
00:01:46.06 --> 00:01:50.05
Next we're going to set the stroke color.

41
00:01:50.05 --> 00:01:58.06
So we'll type
-webkit-text-stroke-color colon space.

42
00:01:58.06 --> 00:02:02.04
We're going to set this to white,
so a pound sign and three Fs.

43
00:02:02.04 --> 00:02:05.05
And then finally we're going
to set the stroke width.

44
00:02:05.05 --> 00:02:15.01
So again we'll type
-webkit-text-stroke-width colon space,

45
00:02:15.01 --> 00:02:19.05
and we're going to set this to
three pixels, then a semicolon.

46
00:02:19.05 --> 00:02:21.00
So with this in place, hit save.

47
00:02:21.00 --> 00:02:22.02
Go back to the browser.

48
00:02:22.02 --> 00:02:23.08
And we'll now see the effect of having

49
00:02:23.08 --> 00:02:27.01
a transparent fill color
and a stroke color of white

50
00:02:27.01 --> 00:02:29.06
and a stroke width of three pixels.

51
00:02:29.06 --> 00:02:31.08
And now in the browsers
that do support this effect,

52
00:02:31.08 --> 00:02:33.03
which is most modern browsers,

53
00:02:33.03 --> 00:02:35.05
you will see a slight
difference in the appearance.

54
00:02:35.05 --> 00:02:37.05
You'll see differences
in both the stroke weight

55
00:02:37.05 --> 00:02:39.08
as well as the outline orientation.

56
00:02:39.08 --> 00:02:42.07
And as we discussed earlier,
the Windows desktop platform

57
00:02:42.07 --> 00:02:45.08
lacks support for both IE
11 and the Edge browser.

58
00:02:45.08 --> 00:02:47.00
And so when using this technique,

59
00:02:47.00 --> 00:02:49.02
be sure to set your client's expectations

60
00:02:49.02 --> 00:02:51.04
in regards to this type effect.

61
00:02:51.04 --> 00:02:53.02
And with that, I'll conclude this episode,

62
00:02:53.02 --> 00:02:56.01
and as always, thanks for watching.