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

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