Create a banner with an overlapped text effect

This is a fun display made with overlapping and offsetting the text:

Code via and adapted to fit in the TypePad template structure.

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

#banner { height: auto; } #banner-inner { position: relative; top: 0; background: #fff; padding: 0 0 15px; border: 0; }

Then we add the overlapping effect:

#banner a { display: inline; position: relative; font-size: 100px; letter-spacing: -5px; color: rgba(0,0,255,0.5); } #banner a:after { content: "Blog Title"; position: absolute; left: 10px; top: 5px; color: rgba(255,0,0,0.5); width: 100%; }

NOTE: In the CSS code for the :after section, you add the actual name of your blog where it says "Blog Title" - this is because the blog title is displayed a second time with the offset.