Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey
Watching:

Creating special effects with text shadows


From:

Web Fonts First Look

with James Williamson

Video: Creating special effects with text shadows

I am going to go ahead and admit to some mixed feelings about using text shadows. Now I don't know of any design tool that has been as overused and as misused as drop shadows have been over the years. However, when used correctly, text shadows can enhance a design and it can help a designer to get their point of view across. In the Alice in Web Fonts design I wanted to invoke a sort of classic vintage look that is updated with just a couple of modern twists. Now rather than just using text shadows to create drop shadows I wanted to use them to help recreate the look of sort of an older a hand-painted sign.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

Creating special effects with text shadows

I am going to go ahead and admit to some mixed feelings about using text shadows. Now I don't know of any design tool that has been as overused and as misused as drop shadows have been over the years. However, when used correctly, text shadows can enhance a design and it can help a designer to get their point of view across. In the Alice in Web Fonts design I wanted to invoke a sort of classic vintage look that is updated with just a couple of modern twists. Now rather than just using text shadows to create drop shadows I wanted to use them to help recreate the look of sort of an older a hand-painted sign.

And that's exactly what I want to do with these headers here, Alice in Web Fonts. So I'm going to use a text shadow on the word Alice and another text shadow on the word Web Fonts. Now they're going to be very different so we get some variety to it, but the syntax is actually extremely similar. And Alice I'm just sort of going to make it pop off just a little bit by having a very, very, very subtle shadow. In the word Web Fonts I want to create special effect to give it sort of that offset printed look. So that maybe it was struck a couple of different times or painted that way with this sort of really hard edge shadow to it by using multiple text shadows.

So let's go ahead and take a look at that. Okay so I have my main.css open from the 04_08 folder. You can find it in the _CSS directory in the same directory. I'm going to scroll down to about line 116. That's where I can find these headlines and I want to first focus on the AliceHead right there. So I want to create a line in my CSS. The syntax is really simple if you've never done it before. It's just text-shadow. That's it. We don't need any vendor prefixes. It's been supported for a while so it's really easy to do. And I want to type in 2 pixels space 2 pixel space 1 pixel.

Now what is up with that? Well the 2 pixels and the 2 pixels are offsets. So this is the X offset this is the Y offset. It's basically saying move the shadow over 2 pixels and down 2 pixels and then this is the blur, how fuzzy do I want it. It actually gets really fuzzy really quickly, so I just did 1 pixel to add just a little bit of blur to it, but not much. Now after that I followed that with a color. I'm just going to do a #333, which is a dark gray, not quite black, and then I'll just save this. Notice that we have spaces between those values instead of commas. Don't put commas there. Don't want comma separated.

I want to upload that to my server and then I want to refresh my page. So you can see it's moving over 2 pixels and going down 2 pixels. It's got slight blur to it, but really when you look at this for the first time it makes the text look a little bit bolder, almost like a bevel to it, but it's really subtle. It's not hitting you over the head with "hey, look at this drop shadow." All right, let's turn our attention to web fonts and see how we can create this sort of special effect that I was talking about. All right, so I want to go back into my code and go down to the webHead section and right under this text-transform property here I want to type in text-shadow 3 pixels space 3 pixels space 0.

All right, so that's over 3 pixels down, 3 pixels, and then I want to do a color value of rgb. Okay so, here we're going to pick up a color from our color palette. We're going to do 242, 233, 215. Now that's exact same color as the background. So you're probably sitting here wondering how in the world is a text-shadow that's exact same color of the background going to help us out? Well we're going to use multiple text shadows. One of the really neat things that you can do is you can supply a text-shadows as a comma separated list.

So you can have as many of these things as you want. You can create neon glow effects and outlines. I mean all sorts of things with this. What I'm going to do here for the second one is I am going to create a much further offset and change the color of this. So this one is going to have an X offset of 8 pixels, and Y offset of 8 pixels, a blur of 0, and then finally the rgb value for this one is going to be 155, 155, 155. That's a gray color, a lighter gray. And so with the way that this works is the last item in the list is the one this on the bottom.

The first drop shadow, which is this one, is actually going to lying on top of this drop shadow. So again let's save this. I am going to upload that to my server and then refresh my page and there we go. That's exactly the effect I was looking for. The lighter offset of the same background color makes it look like we have a little bit of knock out and there is the darker shadow that gives me a sort of hand-painted signage look or old handbill printed-press type look and which is exactly what I was going for. Whether you use text shadows to create drop shadows, offset your text, create outlines, or even inner shadows, because you can use negative offsets and create inner shadows inside letters, it's really up to you.

It should be based on your design and your individual point of view. For me, one thing that I'm amazed about is how simple this technique is and how it's still allows you to create all these really creative and compelling typographic effects if it's used properly. And keep in mind that Internet Explorer does not support text shadows and you should always focus on the legibility of your text first and foremost. So if you have a lot of shadows going on sometimes this text can be a little hard to read. Now if you wanted a more technical look at using text-shadows, the syntax involve within, and then possible workarounds for Internet Explorer, check out my CSS3 First Look course in the lynda.com Online Training Library.

Find answers to the most frequently asked questions about Web Fonts First Look.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked