RE: [css3-background] vastly different takes on "blur"

For Firefox 3.6.3 and Opera 10.51, I *do* see similar renderings.

What I find confusing is that it seemed to match the specification (half the blur number extends beyond the geometry) rather than what was discussed today (the full blur number extends beyond the geometry).

Did I mess up in my sample below?  Elaborating...


The gap between the spread and the outer grey circle is 9px.


When I set the blur parameter to 10px, the blur consumes roughly 5px.

When I set the blur parameter to 20px, the blur appears to consume at or near the full 9 pixels.

When I set the blur parameter to 40px, the blur finally goes outside the grey circle by a few pixels.

This is my human perception of the rendering.


When I toss a Firefox screenshot into mspaint and fill the outside area with red, it suggests (via the non-red pixels) that the actual impact of blur parameter of 20px is around 18px, and for blur parameter of 40px it's around 33px.


So now I'm not sure what an author should expect.

Should he/she expect a "mathematical blur" that extends BlurParameter outside of the geometry but visually looks like only a third to half of the BlurParameter to human perception?


- Brian


<html>
<head>
<style>
body
{
 background-color:white;//black;
 padding:50px;
}
div
{
 background-color:grey;
 border-radius:52px;
 -o-border-radius:52px;
 -moz-border-radius:52px;
 -webkit-border-radius:52px;
 height:104px;
 width:104px;
}
p
{
 background-color:black;
 border-radius:2px;
 -o-border-radius:2px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 height:4px;
 width:4px;
 margin:-54px 50px;
}
.p00
{
 box-shadow:red 0px 0px 0px 40px, white 0px 0px 0px 49px;
 -o-box-shadow:red 0px 0px 0px 40px, white 0px 0px 0px 49px;
 -moz-box-shadow:red 0px 0px 0px 40px, white 0px 0px 0px 49px;
 -webkit-box-shadow:red 0px 0px 0px 40px, white 0px 0px 0px 49px;
}
.p05
{
 box-shadow:blue 0px 0px 5px 40px, white 0px 0px 0px 49px;
 -o-box-shadow:blue 0px 0px 5px 40px, white 0px 0px 0px 49px;
 -moz-box-shadow:blue 0px 0px 5px 40px, white 0px 0px 0px 49px;
 -webkit-box-shadow:blue 0px 0px 5px 40px, white 0px 0px 0px 49px;
}
.p10
{
 box-shadow:green 0px 0px 10px 40px, white 0px 0px 0px 49px;
 -o-box-shadow:green 0px 0px 10px 40px, white 0px 0px 0px 49px;
 -moz-box-shadow:green 0px 0px 10px 40px, white 0px 0px 0px 49px;
 -webkit-box-shadow:green 0px 0px 10px 40px, white 0px 0px 0px 49px;
}
.p20
{
 box-shadow:yellow 0px 0px 20px 40px, white 0px 0px 0px 49px;
 -o-box-shadow:yellow 0px 0px 20px 40px, white 0px 0px 0px 49px;
 -moz-box-shadow:yellow 0px 0px 20px 40px, white 0px 0px 0px 49px;
 -webkit-box-shadow:yellow 0px 0px 20px 40px, white 0px 0px 0px 49px;
}
.p40
{
 box-shadow:purple 0px 0px 40px 40px, white 0px 0px 0px 49px;
 -o-box-shadow:purple 0px 0px 40px 40px, white 0px 0px 0px 49px;
 -moz-box-shadow:purple 0px 0px 40px 40px, white 0px 0px 0px 49px;
 -webkit-box-shadow:purple 0px 0px 40px 40px, white 0px 0px 0px 49px;
}
</style>
</head>
<body>
<table>
<tr>
<td><div></div><p class="p00"></p></td>
<td><div></div><p class="p05"></p></td>
<td><div></div><p class="p10"></p></td>
<td><div></div><p class="p20"></p></td>
<td><div></div><p class="p40"></p></td>
</tr>
</table>
</body>
</html>

Received on Tuesday, 22 June 2010 00:51:49 UTC