Text Stroke

6:40

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


Video Transcript

  • 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

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.