Skip to content
Planit Logo – Loading…
  • Work
  • Expertise
  • About
  • Jobs
  • Contact
  • Blog
Planit Agency Logo
Deep in the Archives

HTML Tricks: Cross Hatched Shadows

Planit Agency

August 9, 2011

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:

xhatch

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.

example

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.

Older
Advertising Age Names Planit Small Agency of the Year
Newer
Getting the ROI on your SEO
View All Articles

Share

  • Share on Facebook
  • Share on X
  • Share on LinkedIn

Related.

  • 5 Essential Questions to Ask Before Kicking Off a Website Redesign
  • 5 Powerful Things You Can Do with Google Analytics 4
  • Account management or account services?
  • Are we headed for a Googopoly?
  • CES 2011: I learned about more than just the latest gadgets
If you value excited and experienced teams who can take you to the next level, we’d love to hear from you.
Contact Us
Job Seekers

1414 Key Highway
Suite 100
Baltimore, MD 21230

  • Facebook Facebook
  • Instagram Instagram
  • XTwitter
  • LinkedInLinkedIn
  • TikTokTikTok

Learn about Planit’s commitment to Diversity, Equity, and Inclusion

Proud AMIN Member

© 2026 All rights reserved. | Planit

Privacy Policy | Terms & Conditions

This site uses cookies to offer you a better browsing experience. By continuing to use this website, you agree to their use.

For details, please see our Privacy Policy.

Accept