W3C home > Mailing lists > Public > www-style@w3.org > March 2011

RE: [css3-background] Default shadow color

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>
Message-ID: <FA122FEC823D524CB516E4E0374D9DCF16D315A6@TK5EX14MBXC138.redmond.corp.microsoft.com>
> 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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:38 GMT