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
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
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 & CSS3 Samples</title>
<style>
p {
filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
}
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>
</body>
</html>
精彩评论