Animated glowing border using CSS/ JS?

[gdebojyoti.mail96]

Hello. Is it possible to use JS to automatically and continuously change a particular CSS property? I want to create an animated glowing border whose glow continuously brightens and dampens (using 3 properties to achieve this effect - border, box shadow, inset box shadow). Please note that I am not talking about using "hover" or "active" states. Also I want it to work in all browsers, if possible. Regards.

 

[essellar]

JavaScript would be a horribly bad choice for that. JS is single-threaded, so even though it is possible to update the properties continuously (or, rather, at an interval using setInterval() -- you want people to be able to see the changes, I'd assume), it would cause (and be affected by) blocking elsewhere on the page. You may find that event capture becomes unreliable, or that users do things multiple times because they don't see the effects of their actions immediately, and the animation effect will occasionally stall as other things happen on the page.

CSS transitions would throw the changes into a separate thread in the browser, which would mean that the rest of the UI is usable while the transitions are happening, but that won't work with Internet Explorer (current and older versions). That pretty much leaves an animated GIF used as a border-image -- it still won't work on older versions of IE, but it will work across all current browser versions.

 

[gdebojyoti.mail96]

Okay. Could you please tell me how to use CSS3 transition to create the continuous glow effect?
I'll leave out IE users. ;-)

 

[learning_brain]

You could always use good ol' fashioned css using animated gifs for background borders!

That way, you can create any effect you want and it will process nicely in almost any browser.

css will be a bit nasty though.

If it's a fixed size box, you can just use the background: url(css/images/glowingbox.gif)

otherwise, you'll have to create a whole bunch of div's within div's for each side and corners of your box (8 in total) and use repeating background images to cover whatever size your "box" will be.

for instance...

<div class="boxtop">
<div class="boxtr">
<div class="boxright">
<div class="boxbr">
<div class="boxbottom">
<div class="boxbl">
<div class="boxleft">
<div class="boxtl">

Some content

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

/*css*/
.boxtop{
background: url(css/images/glowhorizontal.gif) repeat-x;
}
.boxright{
background: url(css/images/glowvertical.gif) repeat-y;
}
.boxbottom{
background: url(css/images/glowhorizontal.gif) repeat-y;
}
.boxleft{
background: url(css/images/glowvertical.gif) repeat-y;
}
.boxtl{
background: url(css/images/glowtl.gif);
top:0px;
left:0px;
}

....etc etc...