开发者

How to make glowing text in HTML and CSS

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 开发者_C百科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)


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;


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

How to make glowing text in HTML and CSS

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

How to make glowing text in HTML and CSS


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;
   }


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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜