view our mobile site

watercooler



other recent posts:


aaron

aaron8/9/2011

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:

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Bookmark and Share
10 comments
galen August 9, 2011

so wait – will this help me counterfeit money or not?

JAMES August 9, 2011

THIS IS PRETTY COOL EXCEPT SELECTING ALL THE TEXT WILL REVEAL THE MASKS,

AND NO GLANE, THAT IS ILLEGAL

Anne August 9, 2011

BEAUTIFUL!

ryan August 9, 2011

I love this. I am going to use it on all of my designs.

Carriep63 August 9, 2011

I see nothing but three lines of differently colored text. I am using IE 8.

chris August 10, 2011

i enjoy how serious JAMES is about this. CSS is serious business.

NO, GLANE, THAT’S ILLEGAL. ಠ_ಠ

Alex Burr August 10, 2011

content: attr(title); just blew my mind.

admin August 10, 2011

Yeah, IE won’t render the crosshatching correctly because it doesn’t support pseudo-elements like ::after, but it does degrade gracefully.

Friday Focus 08/26/11: Guilloché | Devlounge August 26, 2011

[...] – HTML Tricks: Cross Hatched Shadows “I’ve nicknamed it “Afterburning”, and the idea is simple: Copy the text [...]

Sean Boone April 23, 2012

LOL, dig it. Super simple but has a nice effect I haven’t really seen a lot. James, calm down dude.



leave a comment