I’ve been thinking about how we could achieve shadows like theĀ one to the right of this wordpress layout [screenshot] using just css. The problem is that the shadow tapers off as it gets to the bottom of the menu element. Currently there’s no way to simulate this with css3′s box-shadow.
IF it were possible to specify the box-shadow values long-form instead being forced to use the shorthand style then maybe would could have separate values for spread-radius (top, right, bottom, left) allowing us to simulate skew or perspective.
[photoshop screenshot showing a shadow tweaked in all four directions in top row, in bottom row show that same shadow behind non-distorted design elements. It should look right.]
I think it might also be useful to have a box-shadow-rotation.
[screenshot]
https://developer.mozilla.org/en/CSS/-moz-box-shadow
And I still say that with so many attributes the shorthand syntax will be annoying to work with (for me at least). And when it comes to wanting multiple shadows (or backgrounds) having the grouping of the values be in comma lists intead of grouped together is much less user friendly than using an array-like syntax.
[ example code comparing the 2 ]
*screensots & code coming soon