Cross-Browser Text Glow Demo
27th October 2005 · Last updated: 5th October 2016
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:
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.
- Lots of divs.
- Lots of precise positioning.
- Messy markup (to say the least). Should have purists aghast with horror.*
- Only works if the fade colours blend in with the background well. (Try it on a dark background — yuck!)
- I guess background images and overlapping other elements will ruin the effect.
- 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?
- 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.)
- 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.)
Tested on Windows XP SP2.
- Opera 8.50 - perfect
- Firefox 1.07 - perfect. (Try increasing the text size!)
- Internet Explorer 6 - perfect
Comments are locked on this topic. Thanks to everyone who posted a comment.
demo for editor in asp coding
Posted on 1 December 2005 at 4:50 am ¶
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 ¶