- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Wed, 9 Jun 2010 16:28:13 -0700
- To: Tab Atkins Jr. <jackalmage@gmail.com>
- Cc: fantasai <fantasai.lists@inkedblade.net>, www-style list <www-style@w3.org>
On Jun 9, 2010, at 2:40 PM, Tab Atkins Jr. wrote: >> I've gone ahead and mocked it up myself, based on feedback from >> fantasai. In the following SVG, the first shape shows the shadow cast >> by an angled corner with a UA using #3, while the second shows the >> shadow cast using #4: >> >> [snip long url] >> >> The first is simple, because it's just increasing the border radius, >> but it's obviously sub-optimal. #4 is a "true" spread - the shadow >> always extends the same distance from each edge in the direction of >> the edge. > > By request, I've extended my example: > > > [snip long url] > > We now have angled corners, circular corners, and elliptical corners. > In each pair, the first is #3 (easy approximation - just increase the > effective radius) while #4 is as close to a true spread as I was able > to get through eyeballing it. > > As I said before, the difference between the two strategies is very > small for round corners. It's really only visible when you get to new > types of corners. Agreed. And even then, it would not take a great deal of math to figure out a better placement of the connection points for the chopped-corner, or for a scallop corner (reversed quarter circle). Here is my version of that, with the rows numbered to correspond to fantasai's numbers, even though they are in a different order. I've also shown the negative spread cases in each one (which creates the same kind of shape change as for an inner shadow spread). I've also shown the scaled element version, using a tall element (the amount of distortion depends on the width/height ratio). http://www.bradclicks.com/cssplay/3x3_Corner_Comparison.svg
Received on Wednesday, 9 June 2010 23:28:49 UTC