I’m often finding or stumbling across new front end development techniques on the web, some of which I make a mental note to use sometime in the future and some of which I want to use right away. I recently found out about the grunge text effect at Janko Jovanovic’s blog and added it in to this CMZ Media Developer blog about an hour ago. The effect currently shows up on the headers from level two through four (H2 – H4); I may add it to other elements later on.

This technique utilizes a transparent PNG placed as the background image in a SPAN you include in the element you want to add the effect to. Since that will validate but it’s still a little on the hacky side I made it a little less hacky by using jQuery to write the SPAN in, like so:

1. jQuery(‘H3,H4’).append(‘<span></span>’);

But, wait a second…

You may be thinking to yourself, “But sometimes an H2 on this blog has the grunge effect and sometimes it doesn’t.” That is because when you apply the grunge effect to an element it can no longer work as a link. To get to any specific entry on this blog from the front page you can get there by clicking the article title, which is wrapped in an A element which is then wrapped in an H2 element, so I turn off the grunge effect on the H2 elements on the front page with the jQuery URL plugin (which I think I got from here) and the following jQuery code:

1. if ( jQuery.jqURL.url() != “http://developer.cmzmedia.com/” ) {
2. jQuery(‘H2’).append(‘<span></span>’);
3. }

Once you go to a specific article its H2 no longer needs to act as a link so the grunge effect is turned back on.

Welcome Grufón

I have also found that you can add the grunge text effect to Cufón-enabled text. My name for it? “Grufón.” The Grufón effect currently appears on any H2 element of this blog except for those on the front page.