How to Create Inset Typography with CSS3

This guide delves into the creation of inset typography, a trendy text styling technique, exclusively through CSS. Those familiar with Six Revisions might recall Jacob’s Photoshop tutorial on the same subject, but here we focus solely on CSS implementation.Seeking to replicate Jacob’s Photoshop tutorial, I explored innovative CSS3 properties and achieved a comparable typography effect.This entire process can be accomplished with less than ten lines of CSS.Let’s start by establishing the HTML structure, which is quite straightforward. The typography will be an element, encompassed within a for its background. <div id=”insetBgd”> <h1 class=”insetType”>Inset Typography</h1> </div> The initial task is to style the background.Following the background style from the aforementioned Photoshop tutorial, we set the width to 550px and height to 100px.Subsequently, we’ll employ CSS3 gradients. If you’re new to CSS3 browser extensions, refer to my previous article, “CSS3 Techniques You Should Know,” for a primer.For the background gradient, we aim for a top-to-bottom transition from #003471 to #448CCB.The code for 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)); }Next, we define our preferred font.While the Photoshop tutorial employed Rockwell STD, we’ll opt for the standard Rockwell. Neither font is considered a web-safe choice, but a greater number of users are likely to have the plain Rockwell rather than Rockwell STD.Nonetheless, we’ll provide a series of web-safe fonts as alternatives in case Rockwell is unavailable.In the example, I’ve set the font-size to 50px and the color to #0D4383. Here’s the CSS for it: h1.insetType { font-family: Rockwell, Georgia, “Times New Roman”, Times, serif; font-size: 50px; color: #0D4383; }The final and most crucial step is to style the font and achieve the desired “inset” appearance.Jacob utilized “inner shadow” in Photoshop to achieve this effect, but unfortunately, CSS doesn’t offer an “inset” value.Therefore, we’ll create multiple instances of RGBA black and white 1px shadows, some negative in pixel value, and adjust the opacity for each.After experimenting with various combinations, this solution seemed to work well: 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; Apply this text-shadow style to the class above, and the final CSS code is as follows: #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; /* Padding to center the h1 element within 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; } The final outcome is displayed below. Please note that you’ll only be able to view this if your browser supports the current CSS3 specifications used in this tutorial.Your browser does not support iframes, you will not be able to view this demo.A screenshot of the expected effect is provided below, captured on a Windows OS machine using Firefox 3.6 without Rockwell installed.And there you have it. Isn’t it straightforward?While it may not be as visually appealing as Photoshop, this CSS-based approach offers faster load times, greater flexibility than static images, and is achieved without any specialized software.Credit goes to StylizedWeb for inspiring this method. Thank you for reading!

20 Useful Resources for Learning about CSS3

CSS3 Techniques You Should Know

Basic CSS3 Techniques That You Should Know