HTML Tricks: Cross Hatched Shadows

Pixel patterns are a great way of adding subtle intricacy to design. When used correctly, it can add depth and focus to typography that normal "Web 2.0" tricks (glows, shadows and reflections) can't usually achieve.

CSS3 has a lot of great features too, but it doesn't have quite the power that illustrator's Graphical Styles can achieve. Lets say you want system text to mirror the text styles of a dollar bill:

Sadly, there is no easy way to accomplish this, but I have a solution I've been working on that degrades pretty gracefully and doesn't require any scripts to run. I've nicknamed it "Afterburning", and the idea is simple: Copy the text behind the element, offset it slightly, and apply a background image over for masking.

There are a few tricks being used:

A new element is created using the CSS :before pseudo-element, this works in most modern browsers, but is ignored by IE, therefore the text looks normal when it isn't supported. We cannot access and copy the text directly out of the element using CSS, but we can access any attributes that element has using content: attr();. In most cases, the "title" attribute isn't widely used for a header element, so we can copy the text content into this area for our :before CSS rule. The only side effect will be a tooltip when you hover over the text. If that is an issue, use the newly implemented "data-" attributes discussed here. The image can be a transparent PNG or GIF (Animated for that matter), as long as the color matches the background of the header. Sadly, this is one of the issues with using this method, you'll need a solid color in the background for the effect to work. I also added a slight outline to the text with a white CSS shadow. This adds a slight border to separate the text from the hatched-shadow. You may need to adjust the line-height or padding of the header element to ensure the background covers the duplicated element.

As with any modern filter, I wouldn't recommend it until CSS3 is more widely used. Nonetheless, small little flairs like these reward your users for browsing with the newest standards, while keeping your website content easy to update.