Cross-Browser Text Glow Demo

27 October 2005 · Last updated: 11 December 2006

Comments

Why wait for text-shadow in CSS3 to give us a glow effect? Currently only Safari and Konqueror can handle text-shadow, leaving all other browsers in the cold. Well now we can mimic a glow effect using nothing more than divs and basic CSS. This demo works on all the major Windows browsers:

Cross-Browser Text Glow Demo

Admittedly it's not the same quality as genuine text-shadow, but might prove useful for headers, or certain text you wish to highlight. It also generates a neat outline effect if you set the text to the same colour as the background.

Obvious Drawbacks

  1. Lots of divs.
  2. Lots of precise positioning.
  3. Messy markup (to say the least). Should have purists aghast with horror.*
  4. Only works if the fade colours blend in with the background well. (Try it on a dark background — yuck!)
  5. I guess background images and overlapping other elements will ruin the effect.
  6. Ruins semantics. How do you use an <h1> element if you need to repeat it for the effect? Maybe it would work with matching divs as well?
  7. Looks different if you have ClearType (LCD font smoothing) turned on. Works nicely though, as Windows XP smooths the black text into the yellow on curves. (I noticed this happened even with ClearType off on the bold text.)
  8. May look slightly different on various monitors. I found it tricky to get the colours right to be honest. If they look wrong to you, trust me, it's fine on my LCD screen. (I have yet to see it on a CRT though. It may well look too dark there.)

*Maybe JavaScript could be used to replicate a single div and avoid extra markup?

Browser Support

Tested on Windows XP SP2.

Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. sambath:
    demo for editor in asp coding

    Posted on 1 December 2005 at 4:50 am
  2. dan:
    Well I am just thinking that with all of those cons, and you really want the effect, it would be better to go with a graphic.

    Thank you for putting it here of course. Even knowing the header tag would have much seo weight sometimes designers have to make choices. And as long as you are GOOD at your SEO then you can balance things out.

    The main reason I am saying this is that if we are going to try and get a glow, i just don't think it works going half way.

    Posted on 6 December 2005 at 12:22 pm

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

RSS NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 11 December 2006.

What's New

Recent Finds


View previous finds

Current Book Reading

Recently Read Books