Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Css Globe is happy to present a simple trick that helps you improve your site's appearance. With this trick you can use cool gradients on system fonts with nothing but pure css.
We use an empty span element, nested inside a heading tag. Span has transparent png set as a backgrund image and it is placed above the heading text with absolute position.

Take a look at the demo page and share your thoughts.

Take a look at the Demo | Download TextGradient

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• chipgrafx on 17 Jan, 2008 wrote:

  Nice idea but what happens if the title needs to be a clickable link? The span with png background laying over top of the text prevents you from clicking it.

• cssglobe on 17 Jan, 2008 wrote:

  if you put the anchor outside the text and the span you should be ok.
  <h2><a href="#">Title<span></span></a></h2>
  However, both are now block level elements so you might want a little more css to adjust the widths. I will publish an update with working anchors.

• chipgrafx on 17 Jan, 2008 wrote:

  Ah yes. That does seem to work (I checked quickly in Firebug) but as you said the span takes on a block level 'attitude' and would require a little adjusting.
  
  Also, another potential issue would be that you can't _easily_ select the text.

• Trevor Davis on 17 Jan, 2008 wrote:

  Hmm that's weird, Web Designer Wall just posted a similar article.

• cssglobe on 17 Jan, 2008 wrote:

  I already spoke to Nick and we were both surprised and amused by this... publishing an article on the same day about the same thing...

• cssglobe on 17 Jan, 2008 wrote:

  ...as for selecting the text... you're right, it is hard to select it, the way it is. The workaround would be decreasing the height of the span, make it high enough but not covering entire height. That way you can select the text "from bottom up".

• Jermayn Parker on 18 Jan, 2008 wrote:

  aarrggghhhhh im over these gradients
  
  cool tip but I think its time for people to stop rehashing current trends...

• Jermayn Parker on 18 Jan, 2008 wrote:

  opps the above link should not have the " in it...
  http://germworks.net/blog/2007/12/20/state-of-web-2007
  
  sorry

• An Jay on 21 Jan, 2008 wrote:

  really good. Thanks for sharing it.

• elvisparsley on 25 Jan, 2008 wrote:

  When I see it in Firefox, I have no problem with y in My cool site. but when I see it in IE7, y becomes v. The lower half disappears. Is it only me?

• Cleo on 25 Jan, 2008 wrote:

  Hi... great tutorial!
  Can I to publish in portuguese in my page?
  I credit you.
  
  Thanks a lot.

• cssglobe on 25 Jan, 2008 wrote:

  Cleo, please do. This and other articles have already been translated to Spanish, German and French :)

• Bdesign on 26 Jan, 2008 wrote:

  Count Romanian too. I'll translate it, modifiy it a little. I'll certain give credits. I like the way you gradiate the text. Thanks for sharing.

• Dennison Uy on 27 Jan, 2008 wrote:

  Hmm. I don't know what I did but I recall tabbing through different sites in Firefox with the demo page open and when I returned it looked like this:
  http://blog.codesignstudios.com/wp-content/uploads/2008/01/gradient-error1.png
  Might be a random bug though. Anyone else experience the same problem?

• Dennison Uy - Graphic Designer on 27 Jan, 2008 wrote:

  By the way I am using Firefox 2.

• Sam Rayner on 27 Jan, 2008 wrote:

  As I commented on Nick's post, I've managed to achieve the same thing without the empty span:
  
  http://samrayner.com/archives/span_free_gradient_text_effect/
  
  Internet Explorer users will get just plain text with my method though so it's a trade off. Consider it an alternative. :)

• s4l1h on 27 Jan, 2008 wrote:

  Nice Work Thank

• Cleo on 28 Jan, 2008 wrote:

  Thank you a lot!
  I'll send you the link with the article as soon as it's done!
  
  =)

• schnuck on 3 Feb, 2008 wrote:

  new? inventive? tutorial? or simply stolen?
  http://www.khmerang.com/index.php?p=95
  
  

• cssglobe on 4 Feb, 2008 wrote:

  @schnuck: Stolen? Isn't it possible that some people have similar ideas? Take a look at the rest of my articles and think again before calling me a thief.

• chaoskaizer on 5 Feb, 2008 wrote:

  nice trick, anyway the heading span is consider invalid. you try adding <h2>Lorem Ipsum <span>&nbsp;</span>

• suraj on 6 Feb, 2008 wrote:

  this do not validates the page as the span tags are empty..

• schnuck on 10 Feb, 2008 wrote:

  people can indeed have the same ideas - however, i miss the amends to your article that states close similarities to the khmerang technique even though i have pointed you towards them. you wanna be cool? mention the coincidence.

• tom on 3 Mar, 2008 wrote:

  It doesn't seem to work with background color other than white.
  
  The transparent image shows up. Any way to fix this?

• cssglobe on 3 Mar, 2008 wrote:

  Only way to fix it is use gradient that matches background color.

• Martyn P on 31 Mar, 2008 wrote:

  What's the license on the demo images? Am I allowed to use them on a website?

• Anjelina on 24 Apr, 2008 wrote:

  Superb Tutorials. Thanks for publishing and sharing this. So far I kew that gradient can be applied only through I mage. But I saw a different things.
  Thanks! once again.
  

• Xavier on 23 May, 2008 wrote:

  nice idea ~ Thanks !!
  but why must add " background-image: url(none.gif); " ?