RE: Shadow knockout

> When you try to create a "real" shadow, you start running into a lot of
> questions:
> 
>    * do I want to shadow the dotted opaque border as dots?
>    * what if it's a border image?
>    * does alpha-transparency on the background change the shadow opacity?
>    * what about its color? does red semitransparent create a colored shadow?
>    * do I shadow the text, too?
>    * do I shadow images?
>    * abspos children? what if they're not over the box, but positioned
>      elsewhere?
> 
> etc. (Answering "yes" to some of the above, btw, means you can't do things
> like spread very easily.)
> 
> So we decided to keep it very simple, knock the shadow out, and handle all
> the rest with a generic filter mechanism that lets you
>    a) choose what layers you want to composit and affect
>    b) choose exactly what kind of effect you want, whether its shadows
>       or opacity or reflections or colored-pencilling
> 
Isn't this why it was decided that a dropshadow css filter would be a better solution for this?
I proposed this construct (among others) a couple of days ago on the public-fx list:
	Filter: dropshadow(X, Y, Q, C, A, D, S, I, K) with
	a.	X = width of the blur box
	b.	Y = height of the blur box
	c.	Q = number of blur passes
	d.	C = color of the drop shadow
	e.	A = angle of the dropshadow
	f.	D = distance vector of the dropshadow
	g.	S = strength (Color of the dropshadow is multiplied by this)
	h.	I = inner shadow
	i.	K = knockout (just display the shadow, the original artwork is removed)

To do a shadow like Illustrator, InDesign or Photoshop, browsers will need to implement blending which requires significant architectural changes in the browser. (However, this could be added later.)
Under the hood the browser can implement the filter through SVG or run it directly on the CPU/GPU.

In this case, the filter in css would look like:
element:hover
{
filter: dropshadow(5px, 5px, 1, rgba(0,0,0,.2), 0, 0, 1, 'false', 'true');
}
You'd probably want to add a transition to make this effect smoother...
(The effect he's actually going for is called 'glow' but you can implement it as 'dropshadow)

Rik

Received on Friday, 28 January 2011 03:29:32 UTC