Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
First introduced in the CSS2 specification and then pulled back in the 2.1 spec, text shadows are reintroduced in CSS3, and gives us another typographic design tool to use when creating our sites. Thankfully, text shadow is broadly supported without the need for vendor prefixes and except for providing a workaround for Internet Explorer, which we'll take a look at in a moment, text shadows are definitely a technique that's ready to use now. Since the syntax is so easy to work with, let's dive in and start adding a few effects to our site using text shadows.
So I have the index.htm file open from the 04_06 directory, and we'll also be working of course with the main.css in the _css directory as well. So I am going to go ahead and preview this in my browser to show you kind of what we're going to be doing, and we're going to be concentrating on this headline, "Explore our world your way." We're going to add a little depth to that by adding some text shadows and then we're going to refine them until we're really just sort of embossing the text if you will. So I am going to go ahead and close out of that and come back into my index.htm.
I am also going to switch over to my main.css. Now, I want to find the mainContent h1 selector. That's who's driving that, and it's on line about 312 or so. All right, so there it is. So the first thing I am going to do is just create a new line within the existing selector and the syntax for this as I mentioned is just really, really simple. It's text shadow, text- shadow. That's all it is. It's very simple. You just add some offsets. So I am going to add the X offset of 5 pixels. That will move the shadow 5 pixels over to the right, then a space, and then a Y offset, 5 pixels. Another 5 pixels will move it 5 pixels down.
So positive values are going to move you to the right and down. Negative values would move you in the opposite direction if you wanted to change the light source. Next, I have to tell it what level of blur I want. I want to do a 10 pixel blur. So that's going to be the diffusement of the drop-shadow if you will, how blurry it is. The higher that number, the bigger the blur, and then finally you just specify what color you want and we'll just do a gray. I know shadows aren't gray, they have tones in them, but for what we're doing here we'll just do sort of a dark gray. All right! So I am going to go ahead and save that and then preview this in my browser. Cool! There is our text shadow.
Now, you might argue that it's a bit blurry, a bit too much, and really you could argue that about any drop shadow. So let's take a look at how we can maybe refine this a little bit, or ways that we can use it in sort of non-expected ways. Now, to do this, I am going to modify the background that we have here, this sort of nice gradient background, because I really want this to stand out. So I am going to go about down to line 610 and find that main info area, there it is, right there, and I am going to modify the background here essentially. I am just going to go ahead and kill all this.
Feel free to keep it if you like. I just want to highlight this with our file and I am just going to make the color something dark like 952. It's kind of an orange color and save that. That will work. Then I am going to go back up to my mainContent h1. Remember it's about 312 or so. If you're wondering, you could preview that and now you can see sort of it's got that darker orange color to it. Okay, so what are some of the ways that we can modify a text shadow to make it a really, really cool effect? Well, a couple of things that we can do is that you can have multiple shadows and by applying multiple shadows, you can create all sorts of cool effects like we're going to do a glow.
So instead of doing an offset, essentially the first two values, I am going to make them 0. So no offset. We'll set it to 0 and 0. Next, for the blur, 2 pixels, so not very much blur at all. Just 2 pixels on the blur. And then color-wise, I am going to make this a little lighter. It has a white for you. That's pretty light. That in itself would just sort of give a 2 pixel white line around my text that almost looks like an outline. But what's really neat is you can take text shadows and you can just throw as many of these on as you want. Now, obviously you're adding to the rendering overhead, so you want to be careful about doing too many of these.
But in this case if I do another 0, 0 offset and this time let's do 5 pixels and then do another color like #ddd, which is sort of a gray. It's not really white, but it's really bright. And then do another, a third one, 0, 0 and then this one, a 10 pixel blur, so a much larger blur, and do #ccc or gray here. I am just keeping colors neutral but we can certainly add colors to them. So what's happening here? We have three text shadows. The last one you applied is the one that gets applied on the bottom. So that bottom one is going to be just color, really blurry, a lighter or darker gray and then it's going to get brighter as it goes inwards.
So, each one of these is going to be progressively brighter. This is going to give the illusion of sort of a neon glow as you can see. So the text is outlined in white and just sort of has a soft edge glow to it. So really easy way to simulate kind of an outer glow, and it works pretty much anywhere. Internet Explorer doesn't quite support it, but everybody else pretty much does, which is so cool. What about text embossing techniques? I am sure you've seen those. Again it's just sort of playing around with the text shadow. If I come in and let's say I do a 1 pixel offset, 1 pixel horizontal offset, 0 vertical offset, and 0 blur, so it's going to be a solid color line, and then #cb7d20.
It's a sort of a light orange color if you will. If I save this and test it, you can see kind of that embossed effect that I was talking about. If you're doing that embossed effect, the color that you choose is really important. You'll notice that this is really just a lighter version of that background color and that's one of the reasons why it's so effective. If I were to try a different color or a different shade, maybe desaturate it a little bit, it probably wouldn't work quite as well. Now, again, this doesn't work in Internet Explorer. If I test it, and as you can see, nothing. However, you can if you want text shadows in Internet Explorer, they're not that hard to get by passing a filter.
Let me show you what I mean. Let's go back to our selector and after the text shadow I am just going to type in filter: dropshadow. Now these filters are proprietary Internet Explorer devices. So you probably want to pass them in their own style sheet through the use of conditional comments. We'll do color =, and we'll do the same color #cb7d20, offx or offset x, =1, offy=0. So we'll go ahead and save that and then test that in Internet Explorer and we can see that we have kind of embossed text in Internet Explorer.
Now, the real big hit that your text takes on this, and this is every article I ever read about this, just the anti- aliasing just goes away. It just looks bad. Some would argue, "Well, you know, at least you're seeing the embossing technique." I would argue the embossing technique is not worth your text looking really jagged like that. But really how you use that, what type of support level you want to do, is totally up to you. Now the technique, though simple, has a surprising amount of variations. The glow I showed you, the emboss technique. So really it's up to you to use your own creativity to go ahead and create some of those really compelling typographic effects.
I've always said that some designers do rely a little too heavily on drop shadows. So be careful, use them judiciously, and pay special attention to how they might negatively affect text readability. Also effects like this where we're using the filter, test them out for yourself and determine whether they are right or not for your design.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.