Text Stroke

6:40

In this video, you'll learn how to make outlines around your text using the text-stroke property.

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

  • 0:07

    CSS3 Typography - Text Stroke with Nick Pettit

  • 0:13

    In this video, we're going to learn how to add outlines to the text on a web page.

  • 0:18

    This is typically done using the new CSS3 property Text Stroke.

  • 0:23

    The Text Stroke property is new in CSS3, and it allows you to outline your text

  • 0:29

    similar to the way you might do so in Photoshop.

  • 0:33

    So as you can see here, we just have a blank page,

  • 0:37

    and if we switch over to our text editor,

  • 0:40

    we're going to just go ahead and add an h1 here,

  • 0:44

    and we'll call it Text Stroke.

  • 0:48

    And now that we have some markup to work with,

  • 0:51

    we can go ahead and move on to the CSS.

  • 0:54

    Now we just have some light styling here, just to kind of bootstrap the page,

  • 0:58

    and I'll make some room for us to work here.

  • 1:02

    Right here, we're just going to apply some basic styling to our h1.

  • 1:06

    We'll allign it center, and we'll give it a larger font size.

  • 1:14

    And when we switch back and refresh, there we go.

  • 1:17

    Now, we can add our text stroke.

  • 1:21

    In our h1 here, I'm just going to type out a text stroke

  • 1:24

    and then I'll go ahead and explain it.

  • 1:27

    So I'm going to type webkit-text-stroke

  • 1:33

    and I'll give it a width of 3px and I'll make it orange.

  • 1:39

    When we switch back and refresh,

  • 1:41

    you can see that we now have a nice outline, or text stroke, around our text.

  • 1:48

    Now, the text stroke property takes 2 arguments.

  • 1:52

    The width of the stroke comes first, and then the color.

  • 1:58

    The width can be a pixel value and the color can be any valid color in CSS,

  • 2:05

    so you could use a hexadecimal color or an RGBA color.

  • 2:08

    This is pretty simple and straightforward.

  • 2:12

    Now, if you look at the code here, you can see that I've added in

  • 2:17

    the webkit vendor prefix--text stroke is part of the CSS3 specification,

  • 2:22

    but because it could still change, having this prefix there prevents

  • 2:25

    compatibility problems in the future.

  • 2:28

    This currently only works in webkit-based browsers, like Safari and Google Chrome,

  • 2:34

    so if you were hoping to use this in Firefox or Internet Explorer,

  • 2:37

    you'll just have to wait a little while longer.

  • 2:40

    Now, a property that's closely related to text-stroke is the text-fill-color property.

  • 2:46

    You can actually make the fill color of your text transparent,

  • 2:50

    so that just your stroke is visible, so let's go ahead and try that.

  • 2:55

    So right after our text-stroke here, we'll go ahead and type webkit-text-fill-color,

  • 3:03

    and we'll set that to transparent.

  • 3:06

    When we switch back and refresh, you can see that our text

  • 3:10

    is now transparent in the middle and just our text stroke remains.

  • 3:15

    So to demonstrate this a little bit better,

  • 3:18

    we could even add a text shadow to this if we wanted to,

  • 3:21

    so let's go ahead and try that really quick.

  • 3:24

    So right after this, I'll add a text shadow, and I'll just give it a few values here,

  • 3:32

    and we'll make our shadow black.

  • 3:36

    And when we switch back and refresh,

  • 3:38

    we can see that we now have this nice text shadow here.

  • 3:41

    Now, text stroke may only work in webkit, but if you'd like to make text strokes work in Firefox,

  • 3:48

    you can actually simulate them using multiple text shadows,

  • 3:53

    so let's go ahead and try that out.

  • 3:55

    So if I switch back to the editor here,

  • 3:58

    we're just going to go ahead and delete all this stuff right here.

  • 4:02

    We're going to set the color of our text to white,

  • 4:07

    and then we'll add in our text shadows.

  • 4:11

    We're going to add multiple text shadows here, so I'm just going to drop down to the next line.

  • 4:16

    We'll put in our first one here,

  • 4:23

    and we want to give this a blur radius of 0.

  • 4:27

    I'll just go ahead and copy and paste this here,

  • 4:34

    and we want to separate each one of these with commas.

  • 4:39

    And then, we do need to change the values just a little bit here,

  • 4:44

    so that our stroke will go all the way around our text.

  • 4:51

    I'll just space these out a little bit better here--alright.

  • 4:57

    Now when we switch back and refresh, you can see that we now have a text stroke

  • 5:03

    without actually using the text stroke property--we're only text shadows here,

  • 5:07

    and this will work in Firefox--pretty neat.

  • 5:10

    Now, of course, we can't really increase the width of the stroke very gracefully,

  • 5:16

    but we can push it a little bit, so let's try and simulate a stroke with a width of 2px.

  • 5:22

    So I'm just going to switch back to the text editor here,

  • 5:25

    and we're going to change all of these values to 2 instead of 1.

  • 5:33

    When we switch back and refresh, you can see that we now have a text stroke

  • 5:37

    with a width of 2.

  • 5:39

    As you can see, it doesn't look perfect, but it's not bad.

  • 5:43

    Now, there is one last thing I'd like to show you.

  • 5:45

    Let's go ahead and change the color on some of these strokes

  • 5:48

    to create an embossed effect.

  • 5:50

    So switching back to the text editor one more time here,

  • 5:54

    we're going to just change a couple of these back to 1

  • 6:00

    because we only want a width of 1 on the lighter part of our embossed text,

  • 6:07

    and we'll make that part a little bit lighter there.

  • 6:10

    And then, below our text, we'll make it a little bit darker.

  • 6:15

    So I'm going to switch back and refresh here, and there we have it.

  • 6:20

    You can see that we have a pretty convincing-looking embossed text effect,

  • 6:25

    just using text shadows.

  • 6:27

    That's just another one of the interesting things we could do with text in CSS3.

  • 6:32

    In the next video, we'll learn how to add reflections.

  • 6:35

    [?mellow guitar music?]

  • 6:37

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

Show full transcript