How to Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”

That is correct, but this time we are going to do it using only CSS.

I set out to recreate the How to Create Inset Typography in Photoshop tutorial, and after experimenting with some fresh and new CSS3 properties, I was able to make a similar type treatment.

We’ll do all of this in less than ten lines of CSS.

Step 1: The HTML markup

Let’s first set up the HTML, which is super simple. The typography will be an h1 element, wrapped around a div for its background.

 <div id="insetBgd"> <h1 class="insetType">Inset Typography</h1> </div> 

Step 2: The background

The first bit of CSS we want to do is the background.

We are going to create it similar to the background in the Photoshop tutorial mentioned above. We’ll set the width to 550px and height to 100px.

Next, we are going to use CSS3 gradients. If you’ve never used the required browser extensions for CSS3, hop on over to my previous article called CSS3 techniques you should know first, to catch up.

We want the background to have a gradient going top to bottom, from #003471 to #448CCB.

The code to do this is:

 #insetBgd { width: 550px; height: 100px; background: -moz-linear-gradient(-90deg, #003471, #448CCB); background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB)); }

Step 3: Define the font stack and styles

Next, we want to define our preferred font.

The Photoshop tutorial used Rockwell STD, but we are going to just use the normal Rockwell. Neither are considered acceptable web-safe fonts, but more users will have the plain, old Rockwell than the Rockwell STD variant.

However, in case the user doesn’t have Rockwell, we’ll define a few web-safe fonts to render in its place.

In the example, I set the font-size to 50px, and the font color to #0D4383. Here’s what we have:

 h1.insetType { font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 50px; color: #0D4383; }

Step 4: The inset styles

The next and final step is the most important part.

We’ll style the font and give it the “inset” look we’re trying to achieve. We’ll do this by using the text-shadow style.

You’ll notice Jacob used “inner shadow” in Photoshop to get this effect. Unfortunately for us, text-shadow doesn’t have an “inset” value.

So what we’ll have to do is create multiple instances of RGBA black and white 1px shadows, some being negative pixels, as well as adding different levels of opacity to each.

I messed around with a bunch of different variations, and settled on this:

 text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px; 

Add the text-shadow style to the h1.insetType class above, and our final CSS code looks like the following:

 #insetBgd { width: 550px; height: 100px; background: -moz-linear-gradient(-90deg,#003471,#448CCB); background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB)); } h1.insetType { padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */ padding-top: 17px; font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 50px; color: #0D4383; text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px; } 

CSS3 Inset Typography Demo:

Below, you’ll see the final result. Note that you’ll only be able to see it if your browser supports current CSS3 specs for the attributes that we used in this tutorial.

Your browser does not support iframes, you will not be able to view this demo.

What It Looks like in Firefox 3.6 (without Rockwell)

Below is a screen shot of what this effect should look like, taken through a Windows OS machine, Firefox 3.6 and without Rockwell installed.

Conclusion

So there you have it. Pretty simple, right?

It may not look quite as good as it would in Photoshop, but it will take up less load time, it’s more flexible than a static image, and it’s all done without any special software.

I want to give credit to StylizedWeb for giving me an idea of how to go about doing this. Thanks for reading!

Related Content

• 20 Useful Resources for Learning about CSS3
• CSS3 Techniques You Should Know
• Basic CSS3 Techniques That You Should Know