W3C home > Mailing lists > Public > www-style@w3.org > August 2008

Re: [css3-background] box-shadow syntax

From: Brad Kemper <brkemper.comcast@gmail.com>
Date: Tue, 19 Aug 2008 07:54:33 -0700
Cc: www-style@w3.org
Message-Id: <EA37C055-5314-47CB-AEA9-29ACB8223AED@gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>


On Aug 19, 2008, at 7:25 AM, fantasai wrote:

> fantasai wrote:
>> http://dev.w3.org/csswg/css3-background/#the-box-shadow
>> # The ‘inset’ keyword, if present, changes the drop shadow from an  
>> outer
>> # shadow (one that shadows the box onto the canvas, as if it were  
>> lifted
>> # above the canvas) to an inner shadow (one that shadows the canvas  
>> onto
>> # the box, as if the box were cut out of the canvas and its  
>> contents drawn
>> # on a surface behind).
>> Brad Kemper wrote:
>>> That's pretty good. I have some thoughts on clarifying the spread  
>>> part too, but I will confine myself to the inner shadow for now.
>>> I would prefer two values ("inner" and "outer") instead of one  
>>> ("inset"), so that it is easier to switch back and forth. It might  
>>> be something an author might want to turn on or off via  
>>> JavaScript, or via ":hover" (or in case there was a general rule  
>>> to inherit the inner shadow value, and a more specific one to make  
>>> it outer shadow). It seems like that would be much easier if the  
>>> value could be explicitly set to outer. It could still be an  
>>> optional value, defaulting to "outer".
>
> Would swapping keywords really be easier than adding/removing a  
> keyword?

Actually, from ease-of-use, maybe I am wrong, if you have to specify  
the entire thing to make any changes. I was actually imaging that  
authors might have access to the individual sub-values, like "box- 
shadow-color" or "box-shadow-blur-radius". That goes beyond what is in  
this draft though. If we did have that, then you could do this sort of  
thing:

JavaScript:
myElement.style.boxShadowCast = "inner"

CSS:
#myElement { box-shadow:  0.2em 0.2em #CCC outer }
#myElement:hover { box-shadow-cast: inner }

But that requires this to be more of a compound property (in the same  
manner as "background"). But even without that, I consider "inner" and  
"outer" to be more common and understandable words to describe these 2  
types of drop shadows than "inset". So really, if compounded sub- 
properties were off the table, then I would just prefer to see "inner"  
instead of "inset".


> Also I'm wondering if people want to do combinations of inner and  
> outer
> shadows, maybe they should be separate properties so they can be set
> independently? E.g. you might want to add an outer drop-shadow  
> on :hover
> without affecting any already-set inner shadows.

We've discussed that before here. From a logical perspective, based on  
experience with real objects in the physical universe, an object can't  
really be hovering above a surface if it is in fact a hole cut in that  
surface. The only reason to have both at the same time is to create an  
effect that is not really a drop shadow, such as a highlight.

> The syntax I've drafted
> allows you to have both at the same time, but you have to set them
> together.

What does that look like in this syntax? Or do you mean you would add  
another keyword to add as well for "outer"?

>
>
> ~fantasai
Received on Tuesday, 19 August 2008 14:55:14 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:11 GMT