Using inset text on your site’s headers can provide a very eye pleasing experience for the reader. In researching this topic, I found several different means in which to create the effect, using nothing but CSS3, no JavaScript and no images or Photoshop. This article will present the best methodologies that I gleaned from the different sources.
Let’s Get To the CSS3 Examples
The first code example is from Six Revisions. Their method is to first set the background color as such:
#insetBgd {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
Notice the use of a gradient color for the background. That’s obviously not entirely necessary, but it does add a nice, subtle effect to the finished product.
Up next, it’s time to define the fonts that you want to use for your inset text.
h1.insetType {
font-family: Rockwell, Georgia, “Times New Roman”, Times, serif;
font-size: 50px;
color: #0D4383;
}
You can obviously use whatever font that you like, but font choice will affect the final outcome. Some fonts will look better than other fonts in an inset style. Also, if you’re new to CSS3, you don’t have to assign the font as an h1 header. You can define it however you like. However, you might not want to use inset text for the entire page, so using some kind of header level does make sense.
For true inset type, you need to create an inner shadow to the letters. However, there is no inner shadow element to text-shadow, so you have to create your own. Here’s a good example.
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;
Finally, you’ll need to add this shadow style to your font element.
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;
}
Another approach to creating a similar font effect is the Letterpress look. This code example comes from Line 25 and it looks like this:
You’ll note the similar appearance to the inset look, but there are subtle differences. For the code, once again set up a background color. This example cheats a bit by using Photoshop to create a grey color with noise. However, as seen above, that’s not necessary. Just use CSS3 to create your background color. Then write your font code and add in the shadow effect:
h2 {
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
The trick here is to make sure the color of the shadow is lighter than the color of the text. This approach to creating a letterpress affect is far simpler than the inset affect, but the end result is also more simple looking.
Next, we’ll look at text embossing. This is the popular look used by Apple.
text-shadow: 0px -1px 0px #374683;
You do just the opposite if you have dark text on a light gradient.
The final example for this article goes back to another approach to creating inset text, which looks like the image below:
He starts off, naturally enough, by defining the font:
.insetText {
font-family: Lucida Grande;
}
Then define the background color:
.insetText {
font-family: Lucida Grande;
background-color: #666666;
}
So far, we are matching what we did in the first example, except without the gradient color. But now we are going to branch off from the first example and use the background-clip CSS3 element. The Mozilla developer’s site defines the background-clip element as a “CSS property [that] specifies whether an element’s background, either the color or image, extends underneath its border.” It works as a clipping mask. Here’s how that code looks:
.insetText {
font-family: Lucida Grande;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
The background color is now clipped behind the text. Now, you have to make the text transparent.
.insetText {
font-family: Lucida Grande;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
At this point, it’s time to revisit text-shadows. This time, it will be done with RGBA colors.
.insetText {
font-family: Lucida Grande;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
Here you have four different methods to create an inset font affect. Some of these methods are simple, some are a bit more complicated. Feel free to mix and match or even create your own CSS3 text affects.
