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.

  • 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
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">