Create a banner with an inset text effect

This is a cool effect with the look of the text being sunk into the background:

Code via and adapted to drop into the TypePad template.

First, we use the code to use a text-only banner:

#container { background: #eee; } #banner { height: auto; } #banner-inner { position: relative; top: 0; padding: 18px 0px; border: 0; }

Then we add the inset shadow code to the blog title:

#banner a, #banner a:hover { text-shadow: 0px -2px 0px #333, 0px 2px 3px #666; color: #353535; text-transform: uppercase; font-size: 60px; font-weight: 800; } body, #banner-inner { background: #535353; }