- From: Brian Manthos <brianman@microsoft.com>
- Date: Fri, 4 Mar 2011 18:26:05 +0000
- To: Brad Kemper <brad.kemper@gmail.com>
- CC: Tab Atkins Jr. <jackalmage@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>, Estelle Weyl <estelle@weyl.org>
And here's another example that animates the shadow with jscript but could easily be done with an animatable 'color' property where it would be more complicated to animate box-shadow directly (if supported at all).
<!doctype html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
div {
width: 200px;
height: 100px;
margin: 50px;
box-shadow: 0px 0px 50px;
}
span {
color: black;
}
</style>
<script>
var i=0;
var dir=5;
function OnInterval()
{
i = Math.max(0, Math.min(i + dir, 255));
if ((i == 0) || (i == 255))
dir = -dir;
var div = document.getElementsByTagName("div")[0];
div.style.color = "rgb(" + i + "," + i + "," + i + ")";
}
function OnLoad()
{
window.setInterval(OnInterval, 20);
}
</script>
</head>
<body onload="OnLoad();">
<div><span>Script-animated shadow</span></div>
</body>
</html>
Received on Friday, 4 March 2011 18:26:39 UTC