Take more control over the style, layout, and even the user experience of your web designs. Get tips for creating more beautiful websites with CSS.
- [Instructor] Hi, this is Chris Converse and in this episode we'll use the text shadow property to create a 3D text effect. So if you'd like to follow along download the exercise files and let's begin by opening the HTML file in a text editor. So once you have the HTML file open you'll see we have a very simple layout. Up in the head area we're linking to style.css, which we'll open in a moment. And inside of the body area we simply have an h1 and two paragraph elements. And it's this h1 element that we're going to be adding our effect to. So to do that let's go back to the exercise files, let's open style.css in our text editor, and I'm going to scroll up here a little bit.
Let's find the h1 element. After the text align property let's first come in here and change the color. So I'll type color colon space, pound sign, and three fs for white. Save your css file, and then if you reload this in a browser you'll see that h1 is now in white. So back in the css let's add another property called text-dash-shadow. So we'll type text-shadow, colon, space. And let's come in here and let's set a brown color, and we're going to set an offset of negative one on the x and one on the y.
So we'll do that by typing a pound sign, 44 for red, zero nine for green, and zero d for blue. Then a space, let's type negative one px. That's the x offset, then a space. The y offset is going to be one pixel, and then a semicolon. With this in place you can hit Save, go back to the browser, and you'll now see that we have a negative one offset on the x and a one offset on the y, which gives us a drop shadow that goes towards the bottom left.
And now back in the css what we can do is compound this property, which means we can add multiple sets of values to the text shadow property. So I'm going to come in here and put the semicolon on its own line, then I'll get the cursor before the color declaration. And I'm going to put this on its own line as well. Then after the one pixel let's come in here and add a comma. And then let's duplicate this line a few times. So I'll duplicate this four times.
Let's come in here to the second property. Instead of negative one let's set this to negative two. They we'll set the y offset value to two. Then for the next line we'll set this to negative three and three. Then negative four and four. And then we'll continue this to represent the total depth that we want for the shadow. So for right now we'll keep this at five pixels. Let's remove the last comma. Save your css, go back to the browser, and we now have a 3D shadow that is five pixels deep.
Now I'd like the length of the shadow to be 30 pixels. So what I'll need to do is add 30 sets of values for the text shadow. So I'll scroll up here a little bit, and then I'll come in here and add 25 more properties, incrementing the values by one for both the x offset and the y offset. And then once I've added my final value I'll make sure that I don't have a comma on the last one. Save the css, go back to the browser and hit Reload, and we'll now see our 3D text shadow 30 pixels long, going toward the bottom left-hand side of the screen.
So by compounding the text shadow property we're able to create this 3D effect on our type. And so with that I'll conclude this episode, and as always, thanks for watching.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.