Css Globe

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Read more! Here are our most recent articles:

• jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
• My Top 5 HTML Coding Preferences
• UX trick: display form data as tabular data
• Class Names Revisited
• How to Display a Flash Video From Youtube in a Modal Window Using Easy Front-end Framework

View All Articles

Comments

1. 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.

2. 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.

3. 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.

4. Trevor Davis on 17 Jan, 2008 wrote:

   Hmm that's weird, <a href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/">Web Designer Wall</a> just posted a similar article.

5. 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...

6. 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".

7. Jermayn Parker on 18 Jan, 2008 wrote:

   aarrggghhhhh im over these gradients
   
   cool tip but I think its time for people to stop <a href=http://germworks.net/blog/2007/12/20/state-of-web-2007/">rehashing current trends</a>...

8. 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

9. An Jay on 21 Jan, 2008 wrote:

   really good. Thanks for sharing it.

10. 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?

11. Cleo on 25 Jan, 2008 wrote:

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

12. cssglobe on 25 Jan, 2008 wrote:

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

13. 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.

14. 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?

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

    By the way I am using Firefox 2.

16. 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. :)

17. s4l1h on 27 Jan, 2008 wrote:

    Nice Work Thank

18. 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!
    
    =)

19. schnuck on 3 Feb, 2008 wrote:

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

20. 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.

21. chaoskaizer on 5 Feb, 2008 wrote:

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

22. suraj on 6 Feb, 2008 wrote:

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

23. 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.

24. 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?

25. cssglobe on 3 Mar, 2008 wrote:

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

26. Martyn P on 31 Mar, 2008 wrote:

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

27. 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.
    

28. Xavier on 23 May, 2008 wrote:

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

29. Jasper on 6 Jan, 2009 wrote:

    I am trying to add this to the top right clickable title fo my Wordpress theme (See link), So far no luck. A question, why does the header one need to be relative and the span absolute?

30. Ralph Smith on 18 Jan, 2009 wrote:

    Can gradients be done on borders? Id like to create a horizontal nav bar using divs and borders and am wondering if there is a way to gradient the background color attribute?

31. Joshua on 14 Feb, 2009 wrote:

    I really like this idea but am having trouble getting it to work. I am very new to web design... so be gentle.
    
    Problem: The gradient png sits above my text rather than on top of it (as though it will not occupy the same space). Any ideas?

32. Eric Pender on 11 Mar, 2009 wrote:

    If I am not mistaken, I think is works from a search engine optimization perspective as well. I have some clients who like to use Flash or just images to gain the text gradient effect. However, because the text is in HTML and is being modified by the CSS (which can be excluded from the search engines), the search engine spiders would just see the text in the header tag and index it as any other text. Great demo!

33. mog on 13 Apr, 2009 wrote:

    I love the idea, but when you make the background color a different color other than white you can see the gradient. =(

Sorry, further comments are disabled for this post.

Subscribe to CSSG Feed

Become a friend