- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 19 Jun 2008 12:41:18 +1000
- 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 UTC