Link to home
Start Free TrialLog in
Avatar of Member_2_99151
Member_2_99151

asked on

How can I pulse the glow effect in HTML

Hi all,

I would like some HTML text to have a glow effect; something like this:
<!doctype html>
<html>
<head>
<style>
h1 {
    text-shadow: 0 0 3px #FF0000;
    color: white;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow</h1>
</body>
</html>

Open in new window

However, I would like either the glow or text color to fade between two colors, to bring this section to the operators attention.
I need to be able to use this code in IE11, Firefox and Chrome.
Any idea how I can achieve this?
Any help would be appreciated.
Many thanks,
James
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

you can use js to add a class, and a timeout to remove the class. the fade effect can be achieved with a css transition.

Here is a fiddle. Click on the text:
http://jsfiddle.net/9j01fbsz/
Avatar of Member_2_99151
Member_2_99151

ASKER

That looks almost perfect!
How do I do this effect continuously without intervention from the user?
you could do it on page load.. not sure that's what you want though - it would be pretty annoying. hold on, let me modify the script.
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Perfect!!
Thanks so much for such a quick response :-)