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

Re: Box-shadow : Why not follow the standardized OpenXML specification ?

From: Alan Gresley <alan@css-class.com>
Date: Thu, 19 Jun 2008 12:41:18 +1000
Message-ID: <4859C74E.9020006@css-class.com>
To: Brad Kemper <brkemper@comcast.net>
CC: Frode Børli <frode@seria.no>, Francois Remy <fremycompany_pub@yahoo.fr>, Henrik Hansen <henrikb4@gmail.com>, CSS 3 W3C Group <www-style@w3.org>

Brad Kemper wrote:
> 
> On Jun 18, 2008, at 4:49 AM, Alan Gresley wrote:

>> This is what we spoke about [1] a month ago Brad. Why can't we have an 
>> inner and outer shadow at the same time?

I have corrected my link [1], it was pointing to a message by dBaron. 
Sorry David.


> I think that is the question I just responded to, and I think I gave 
> roughly the same answer then. If it is a shadow on an object or glyph, 
> then how can it (as Henrik eloquently points out) be "carved into the 
> plane it's levitating over"?


Because that is only what it is conceptually being seen as an inner 
shadow. Above you write "the *illusion* of a hole cut in something, and 
outer shadow creates the *illusion* of that shape floating above 
something instead."

I did write [2] "at which level is 'inner' painted?" and your replied 
[3] somewhat with, "block-shadow: inner: I would put it above the 
background image and below the border (and below any border image)."

So how can a shadow be painted above a text glyph or box but be 
understood as a shadow? Your inner shadow proposal does not function 
like a shadow since it appearance is more like a relief (in sculpture). 
What I am suggesting is inner shadow is really a new property, and one 
that can use the same syntax as text-shadow or box-shadow.  Henrik 
conceptually sees it as "carved into the plane it's levitating over."

Here is a demo showing that effect.

http://css-class.com/test/images/text-shadow5.png

The inner shadow is carved into the text glyph and levitating over it. 
It also uses both text-shadow and the text-shadow inner thing. The 
syntax would be.

text-shadow: 5px 5px 5px 0 black;
text-highlight: 3px 3px 3px 0 color; /* khaki */


Such a simple demo that can not be perceived unless we see it. This is 
why I say look outside the box because such a simple demo seems 
impossible or irrational (against logic) at first. I could not do that 
effect if only one shadow is allowed per glyph or box.


>> Not being one for my graphic arts expertise, here's a few demos of 
>> what I see.
>>
>> http://css-class.com/test/images/text-shadow3.png
> 
> Yes, that is a nice embossing effect (with a shadow under it), in which 
> the emboss has a specular highlight, but I don't see an inner shadow 
> there. I think that if you want to do bevels and embosses like that, or 
> the "pillow emboss" that Flode suggests, then it should be its own 
> property. If it is worth doing, then it should be done properly. Perhaps:
[..]


As I have alway said inner shadow is a *new* property. I am not adding a 
new property. It was your proposal which made me see something and when 
I suggested it, you interpreted it as me adding as something new. I only 
see the possibilities in *your* inner thing. Paradoxically you are 
arguing against your own proposal.

I do not want to discuss emboss, bevel, convex, concave or any other new 
feature. I would love to use both text-shadow and text-shadow inner on 
the same glyph as per your proposal in a paradoxical way.


>> This is what I mean by having a shadow and highlight and the reverse 
>> with a glow.
>>
>> http://css-class.com/test/images/text-shadow3.png
> 
> That's the same picture (by mistake, I assume). But my views on glows 
> are the same as for embossing. Just because you can create a glow-like 
> effect with a drop shadow by specifying zero offsets, does not mean that 
> we should craft drop shadows with that hack as a goal.


Yes it was the same picture :-). I created a negative image. I have done 
it again here.

http://css-class.com/test/images/text-shadow6.png


If we want to hack something extra in the future, I see this.

text-shadow: 5px 5px 5px 0 black keyword;
text-highlight: 3px 3px 3px 0 color keyword;


At this point I not concerned by what features could be added by the 
keyword (repeating myself). I just don't like this.

text-shadow: 5px 5px 5px 0 black;
text-shadow: 3px 3px 3px 0 color inner;


because once this is implemented, how could we ever add any new 
features. I suggested highlight initially because the word *high* would 
seem intuitive for authors in what the property is actually doing. Brad 
you did not create and inner shadow, you created a new property and this 
is why it is painted at different levels.

  For boxes we have.

     1. box-shadow.
     2. background color of element.
     3. background image of element.
     4. box-highlight.
     5. border of element.

  For text glyphs we have.


     1. text-shadow.
     2. text underlining and overlining.
     3. text.
     4. text-highlight.
     5. text line-through.


With boxes we have.


     1. margin box.
     2. border box.
     3. padding box.
     4. content box.


Using this outer inner shadow concept, text shadow inner is like 
removing the padding box and instead having.


     1. margin box.
     2. border box.
     3. margin box inner.
     4. content box.


And mincing Henrik's words "we have a margin carved into the
box it is inside of." ?? %-/ ??


[1] http://lists.w3.org/Archives/Public/www-style/2008May/0192.html
[2] http://lists.w3.org/Archives/Public/www-style/2008May/0201.html
[3] http://lists.w3.org/Archives/Public/www-style/2008May/0205.html


Alan
Received on Thursday, 19 June 2008 02:42:13 GMT

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