- From: Brian Manthos <brianman@microsoft.com>
- Date: Fri, 4 Mar 2011 21:07:32 +0000
- To: Brian Manthos <brianman@microsoft.com>, Tab Atkins Jr. <jackalmage@gmail.com>
- CC: Brad Kemper <brad.kemper@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>, Estelle Weyl <estelle@weyl.org>
> How do you interpolate from inset to non-inset (and the reverse)?
>
> from {
> box-shadow: 0 0 0 blue;
> }
> to {
> box-shadow: 0 0 0 red inset;
> }
Adjusting the example:
from {
box-shadow: 0 0 127px rgb(0,0,254);
}
to {
box-shadow: 0 0 127px rgb(254,0,0) inset;
}
Perhaps it should look something like the below. Is that (or alternative) specified somewhere?
<!doctype html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
margin: 255px;
}
span {
color: black;
}
</style>
<script>
var i=0;
var dir=5;
function OnInterval()
{
i = Math.max(-127, Math.min(i + dir, 127));
if ((i == -127) || (i == 127))
dir = -dir;
var j = i;
if (i < 0)
j = -i;
var b = i + 127;
var r = 254 - b;
var boxShadowValue;
if (i < 0)
{
boxShadowValue = "0px 0px " + j + "px rgb(" + r + ",0," + b + ") inset";
}
else
{
boxShadowValue = "0px 0px " + j + "px rgb(" + r + ",0," + b + ")";
}
var div = document.getElementsByTagName("div")[0];
div.style.boxShadow = boxShadowValue;
}
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 21:08:08 UTC