17

I want to make glowing text in HTML and CSS. I'm following this tutorial.

http://msdn.microsoft.com/en-us/library/gg589484(v=VS.85).aspx#creating_%22glow%22_effects_with_drop_shadows

I want the text to glow, just like the minimize, maximize and exit buttons on Windows Vista and 7 glow when you hover over them.

I have read 8 tutorials online, all saying that FILTER ONLY works on IE (Complete BS btw, I am using IE9 RC and it doesn't even display), so none of the tutorials I have found about glowing actually work for text like <p>, <a> <h1> etc.

How can I make my text glow on hover? (without images)

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
  • 1
    CSS3 isn't well supported yet. – yoda Mar 05 '11 at 05:43
  • But, ok. It isn't well-supported ...yet. That's fine. But the glow effect obviously works on div's, I just don't understand how it won't work for text? –  Mar 05 '11 at 05:54
  • 2
    IE9 dropped support for `filter` I believe, because it is non-standard. However, somehow it *doesn't* support the `text-shadow` property, which is very annoying – Yi Jiang Mar 05 '11 at 06:09
  • Very, very annoying. IE9 is nothing more than overly-exagerated-hype. Just like Apple products. :-p However, I must admit that I must have some sort of addiction to these products, as I always find myself using them anyway. –  Mar 05 '11 at 06:14

4 Answers4

34

Have a play with CSS3 text-shadow perhaps.

text-shadow: #EEEE00 0 0 10px;

IE8 and below won't support it, but that's where filter comes in handy.

filter: glow(color=#EEEE00,strength=3);

P.S. A neat little feature of the CSS3 text-shadow property is that it allows multiple shadows.

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
Marko
  • 71,361
  • 28
  • 124
  • 158
  • Thanks for your answer. *text-shadow: #EEEE00 0 0 10px;* Doesn't work in IE9 RC or IE9 Beta, there is no change in the text, and the last text-shadow sample doesn't work either. :-S –  Mar 05 '11 at 05:57
  • 1
    Ahh true, http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx search for text-shadow, no support! Microsoft fail yet again. – Marko Mar 05 '11 at 06:03
  • 1
    I'm so sick of hearing the generic excuse "CSS3 is still in working draft" and "HTML5 is still in working draft" - If that's the case, then why does Chrome already support feature X in HTML5 or feature Y in CSS3? Why does Flock support this, why does Opera support that? And why doesn't IE9 support most of what any other browser already support? This kind of thing is enough to turn me into a full-blown psychopath lol. –  Mar 05 '11 at 06:07
  • 1
    This article may be of use: http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows – GlennG Mar 05 '11 at 17:56
  • @GlennG, I'm more than willing to accept that as the answer ;) It's not exactly what I was hoping, but from the looks of it, and playing around with it for a bit, I can get this to work as I want it to :-) Thanks! –  Mar 05 '11 at 20:12
11

find examples here http://enjoycss.com/gallery/text_effects

enter image description here

you can open each of them in editor and adjust any css3 parameters then just get css3 code that you need (it will be generated) by enjoycss

for example http://enjoycss.com/39/1#textShadow

enter image description here

Nedudi
  • 5,639
  • 2
  • 42
  • 37
1

Try this CSS3 Trick!

.text-glow {/*Definig font could be useful!*/
   font-size:4em;
   color: #FFFFFF;
   font-family:Arial;
   }
.text-glow:hover {
text-shadow: 1px 0px 20px #ffd200;
-webkit-transition: 1s linear 0s;
-moz-transition: 1s linear 0s;
-o-transition: 1s linear 0s;
transition: 1s linear 0s;
outline: 0 none;
   }
hamidfzm
  • 4,595
  • 8
  • 48
  • 80
0

If you believe you have an answer to this question, please, by all means share it. As I am not going to give up on this. I want the glow effect on Text just as much as I want my coffee every morning.

I have found a half-good, half-cr*p solution in the meantime:

<DOCTYPE html>  
<html>
<head>
<title>HTML5 &amp; CSS3 Samples</title>
<style>
  p {
  filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
    }
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>

</body>
</html>
ace300
  • 70
  • 7
  • 1
    Um. I don't remember typing a whole paragraph twice. –  Mar 05 '11 at 06:28
  • Hahahah perhaps time to see a doctor? – Marko Mar 05 '11 at 06:30
  • Possibly. However, I must get my text to glow before I commit myself (or somebody else commits me) haha :P - But in all seriousness, Glowing Text; You'd think that with all the uber awesome things that can be achieved right now in Web Design, even pre-HTML5/CSS3, you would've thought, maybe even expected that you'd be able to glow some text lol. –  Mar 05 '11 at 07:02