When I first saw CSS text gradient effect I asked myself how this trick can be used to create some more effects. Actually, there are an infinite number of effects you can create – the limit is your imagination. In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.
Step 1: Create a transparent PNG image
You can use Gimp or Photoshop and some of the free brushes:
Experiment with the brushes and color, but keep in mind that the color you use must match the color of your background. The image we are going to use in this example looks like this:
So, we are going to make a grunge effect on a black background.
Step 2: Create simple CSS
Now we are going to add grunge effect on H1 element. In order to make this work we need a little trick: place an empty span tag inside each H1 element. Be sure to add it after the text like in the example below.
<h1>This is one very long title with grunge effect<span></span></h1>
Now the CSS magic. We are going to use absolute positioning inside relative positioning (I mentioned this in my article How to create web application user interface that looks like Outlook several weeks ago). So, we are going to place absolutely positioned span element inside the relatively positioned H1 element. That way a grunge image that is actually a background image of span element will make an overlay on H1 element.
h1 {
position:relative;
color:#aeef33;
font-family: Georgia;
}
h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url('grunge.png');
}
And viola! This is the result:
Step 3: Experiment
Try to find some interesting brushes or patterns which you can use to create a different effects. For more information about CSS text effects, read the following articles:
WoW!!! I don’t :-O believe that , it is so easy to do that :D
Thanks Janko, great fan of yours keep up the good work it really helps the people;-)
Nice Janko, but have to say for once I already knew this one (And in fact posted a very similar example last year)
http://www.blogfodder.co.uk/post/2007/06/SEO-Friendly-H1–H2-Image-Headings.aspx
;-)
Janko,
That’s a really cool tip. I liked your blog so much that you’re in my Daily-Must-Visit-Blog-List though I’m already subscribed to your RSS feeds. Keep it up. I also let my visitor’s know about your blog..
Check it out at http://www.ruchitsurati.net
Thanks.
Ruchit S.
http://ruchitsurati.net
********************************************
Lee, very nice and simple article :) However I prefer the approach I described here because instead of creating an image for each title, you can use one image and create an overlay.
Ruchit, thank you!!
Janko, this article is great! I love simple CSS tricks like this that pack a punch. Keep up the great work!
David, thanks a lot!!
I’ve always thought about doing this, never got round to it. But think I might give this a try, nice one!
Great Stuff! It is so simple, yet so original.
Will be coming back for more. :D
CSS "Cascading Style Sheets" Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm
Great job Janko, this article is great…
Killer article again, thanks! You’re my favorite blog and in my "must check every day list" as well, keep rocking the articles!
Ryan
Great work Janko, I love CSS tricks and this really good tips!
Cool trick, for sure. The only problem I see is that you have to add empty bloat code to your XHTML to achieve it. If one isn’t worried too much about semantics, this trick is definitely worthwhile.
PS, you forgot to mention that the PNG has to be the same color as the background… otherwise it will show up around the letters as well! Try highlighting the text w/your cursor to see what I mean.
@Some.Net: there is an explanation for the backgorund color, just above the PNG tiled image ;-)
a very handy PNG trick indeed!
unfortunately this will trigger a warning in W3C validation, for you have empty span tag :-O
A 2 sec hack would be putting a within the tag :D
Travis, you are right, I like your quick hack :)
Ah, you got me. I must learn to read more carefully :) But Travis is indeed right. What you could also do is put something in your span tags that would make it semantic, such as text saying "Effect applied: Grunge" and then set your text-indent to -5000px in your span tag (as well as giving your span tag a class, ie "effect-grunge"). That way you could even keep track of your different effects and change them more readily should you so desire!
@Some.Net: Thanks for very good tips! I just have to think more in that direction.
nice guys….thks for the tip
Janko,
thanks for sharing it:)im gonna try it on my blog:D
Very cool tip. Thanks again guys
Oh, one other thing, Janko – PNG transparency renders horribly in IE6… you must make your readers aware of this so they know that any use of PNGs alienates all IE6 users. Personally, I use PNGs because if you are still using IE6, I probably don’t like you anyways :)
@Some.net: Right, but IE6 users just have to move on ;)
Are you aware that this technique can be considered text hiding by search engines (especially if you’re "hiding" h1). I’m not saying it will … but it can. (A)
Congrats on the blog ;-)
Dever, I am not sure this is text hiding, h1 is visible in its full beauty ;-)
Well, you can do smth like this than:
<h1><span>text goes here</span></h1>
Dever –
I’m pretty positive that this technique would not be considered text hiding by any search engine. I know that Google’s sophisticated, but this would be damn near impossible to detect.
That’s just one way to achieve it, great post non the less.
This is certainly quite helpful although I’m just getting to grips with CSS and how much can be done with it.
This idea really rocks!
We are using this right in the menu of EVERY PAGE at <a href="http://www.flipscript.com">FlipScript ambigram products</a> to grunge up the text to match the rest of the site. When we have time, we might do the same with every single header!
It adds a ton of visual appeal!
Honestly, the hardest part was just getting the grunge graphic JUST right (not too much, not too little).
Thanks for sharing.
A viola is a musical instrument. The word you meant to use at the end of your entry is ‘voila.’
I’ve added the grunge effect on my dev blog to the H2s and H3s. Here’s an example:
http://developer.cmzmedia.com/?p=242
Also, I used jQuery to add the SPAN element in.
Got you a mention here:
http://developer.cmzmedia.com/?p=316
Christian: Looks great, thanks for the mention (and for pointing out typo!) :)
Thank you for creating the grunge effect.
hey a very handy PNG trick indeed!
unfortunately this will trigger a warning in W3C validation, for you have empty span tag… thanks again
Does anyone know of a good wood-textured PNG graphic to use with this effect? I downloaded a wood texture PhotoShop brush but it won’t let me save it with any transparency.
Thanks for this your a life saver, been trying to do this for days now!