Text Shadows

6:49

In this video, you'll learn about the text-shadow property, which is new in CSS3. The text-shadow property allows you to create interesting shadows underneath plain HTML text.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

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

  • 0:07

    CSS3 Typography - Text Shadows with Nick Pettit

  • 0:13

    In this chapter, we're going to learn about all of the new typographic features of CSS3.

  • 0:18

    Let's get started.

  • 0:19

    Rather than jumping into something more technical, like CSS3 fonts,

  • 0:23

    we're going to start off with something a bit more fun that you can use right away,

  • 0:27

    and that is the all new text shadow property.

  • 0:30

    So here you can see we have just a basic page with nothing on it,

  • 0:34

    and I'm going to go ahead and add some markup.

  • 0:37

    So we'll type out an <h1>, which we'll be applying our text shadow to,

  • 0:42

    and we'll just call it <h1>Text Shadows</h1>

  • 0:46

    and we're done--with the markup, that is.

  • 0:48

    Now, let's move on to the part that you came here for, which is the CSS.

  • 0:53

    Now, here you can see we just have some basic CSS--nothing too fancy--

  • 0:57

    just to kind of bootstrap the page.

  • 1:00

    So I'm going to go ahead and type out a really basic text shadow,

  • 1:03

    and then I'll explain each part.

  • 1:05

    So first, we need to select our h1 { and I'm actually going to align it center,

  • 1:10

    so that we can see it a little bit better.

  • 1:13

    I'm going to make the font size kind of large here,

  • 1:18

    and let's just switch back and see how that looks--great.

  • 1:22

    Okay, now we're ready to go ahead and type out our text shadow--

  • 1:26

    and I'm just going to do a really basic text shadow here--

  • 1:30

    and when we switch back to the browser and refresh,

  • 1:33

    there we have it--a very basic text shadow.

  • 1:37

    Now, I know this looks a bit clunky--kind of like clip art from 1997--

  • 1:42

    but we're going to go ahead and improve on that quite a bit.

  • 1:45

    Let's go ahead and switch back to the code first.

  • 1:48

    Now, text shadow takes several arguments.

  • 1:51

    The first argument is the \"x\" offset, which here we've set to a value of 3 pixels.

  • 1:57

    This determines how far to the left or right the text shadow is placed

  • 2:02

    relative to the text.

  • 2:04

    I've gone ahead and set it to 3 in this case,

  • 2:07

    but we can go ahead and push it to the left with a negative value, so we'll put -3.

  • 2:13

    When we switch back and refresh, you can see that we've now pushed this text shadow

  • 2:18

    to the left.

  • 2:20

    Now, the next argument is the \"y\" offset,

  • 2:24

    and this determines the vertical placement of the shadow relative to the text.

  • 2:28

    Again, we've set it to positive 3 pixels, but we could set this to a negative value as well,

  • 2:34

    and make it appear above the text.

  • 2:36

    The next argument is the blur radius.

  • 2:39

    Now, here I've set this to 0 for our first example,

  • 2:43

    but let's go ahead and try playing around with this.

  • 2:45

    If we bump up our blur radius to something like 5 pixels,

  • 2:50

    it will actually start to blur our shadow.

  • 2:54

    So now our shadow is starting to look a little bit nicer,

  • 2:57

    like something you might expect from Photoshop.

  • 3:00

    Now, the last argument is the color.

  • 3:03

    We're just setting this to a grayish tone for now,

  • 3:07

    but we could set this to any color we want.

  • 3:10

    If you've ever wondered what an orange shadow might look like,

  • 3:13

    we could go ahead and try that out, so we'll set this to a nice orange-looking color,

  • 3:18

    and when we refresh--pretty cool.

  • 3:22

    So now that we're past the basics, we could go ahead and try

  • 3:25

    some more advanced techniques.

  • 3:28

    One really interesting technique that you can use

  • 3:31

    is the RGBA color model.

  • 3:33

    We'll talk more about the RGBA color model in an upcoming video,

  • 3:36

    so for now, we'll keep it very basic.

  • 3:39

    RGBA stands for red, green, blue and alpha.

  • 3:42

    We can define a color by setting its red, green, and blue color,

  • 3:46

    and then we can set a number between 1 and 0 to dial down the opacity.

  • 3:50

    So let's go ahead and try that in place of our hexadecimal value here.

  • 3:55

    So we'll type rbga and we'll go ahead and set this to black

  • 4:00

    by just giving r, g, and b a value of 0

  • 4:04

    and we'll dial down the opacity just a little bit by setting it to a value of 0.8.

  • 4:10

    And when I refresh the page, you can see that we have a more blended-looking shadow here,

  • 4:16

    which is pretty nice.

  • 4:17

    Now, this technique doesn't make a whole lot of difference on this simple page,

  • 4:21

    but if you had a textured or more complex background,

  • 4:25

    you would be able to see it shining through ever so slightly,

  • 4:28

    and even more so if you turned down the opacity on the text shadow even further.

  • 4:32

    Another interesting thing about text shadows

  • 4:35

    is that you can actually have up to 6 shadows per element,

  • 4:38

    so let's go ahead and try adding a 2nd shadow.

  • 4:43

    So I'm just going to go ahead and put a comma here,

  • 4:47

    because we separate our shadows with commas,

  • 4:50

    and I'm going to give it an \"x\" of 10px,

  • 4:55

    a \"y\" of -5px, just to offset it from our first one,

  • 4:59

    and I'll even give it a larger blur radius,

  • 5:02

    and we'll just set the color to orange.

  • 5:04

    And if we go back and refresh, you can see that we now have 2 shadows:

  • 5:08

    we have our first one here, which is kind of the darker one,

  • 5:12

    and then we have a second orange shadow, which is going to the upper right.

  • 5:17

    Now, you can imagine how this might be used with a few red, yellow, and orange shadows

  • 5:22

    to make some really cool flame effects or some subtle glows.

  • 5:26

    Now if that's too cheesy for you, I'd like to show you one final technique

  • 5:29

    that's a bit more elegant and subtle.

  • 5:32

    So we're going to switch back to our text editor,

  • 5:35

    and we're actually going to change the color of our text to a much lighter color.

  • 5:39

    We're going to delete our second shadow here, because we don't need that anymore,

  • 5:45

    and we're just going to delete this rgba and change it to a black color.

  • 5:51

    We're going to set the \"x\" offset to 0,

  • 5:54

    the \"y\" offset to -1px,

  • 5:58

    and the blur radius to 1px.

  • 6:02

    Now, when I switch back and refresh,

  • 6:05

    you can see that by using a text shadow that's offset by 1 pixel,

  • 6:11

    we can create this really neat inset text effect.

  • 6:15

    The light color of the text and the dark color of the shadow

  • 6:20

    combine to make the shadow appear as though it's inside the text

  • 6:24

    and that the text is pressed into the page.

  • 6:27

    The 1 pixel blur radius really finishes things off

  • 6:31

    and sort of softens the edges so that it can all gel together really nicely.

  • 6:36

    That about wraps things up for text shadows, but in the next video,

  • 6:40

    we'll take a look at some more things you can do with text in CSS3.

  • 6:44

    [?mellow guitar music?]

  • 6:46

    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.