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 (
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: