- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Wed, 22 Jul 2009 13:01:44 -0700
- To: www-style@w3.org
Summary:
- Discussed interaction of box-shadow and border-image. Chris presented
his investigation and proposals in
http://www.w3.org/2009/07/B-and-B/border-image-shadow-combine.html
The discussion concluded that different types of border-images require
different approaches. We will be looking for feedback on www-style.
- Discussed percentage border-radii: elliptical vs circular, desired
effects, and implementation status.
====== Full minutes below ======
Present:
Bert Bos
David Baron
Arron Eicholz
Elika Etemad
Sylvain Galineau
Daniel Glazman
Brad Kemper
Chris Lilley
Peter Linss
Steve Zilles
<RRSAgent> logging to http://www.w3.org/2009/07/22-CSS-irc
<ChrisL> Agenda: http://lists.w3.org/Archives/Member/w3c-css-wg/2009JulSep/0025.html
Scribe: ChrisL
Chair: Peter
Interaction of box-shadow and border-image
------------------------------------------
ChrisL: I sent in a proposal
http://www.w3.org/2009/07/B-and-B/border-image-shadow-combine.html
<dbaron> I think we should post this proposal to www-style and try to get
some feedback.
Bert: Prefer the 4.2 opaque box solution
Brad: prefer the one with shadows all round
ChrisL: That's actually two shadows, one inset
Daniel: Prefer the one with the alpha chanel.
... often asked how to do that
Brad: Anyone that can create an image can also create a drop shadow
Daniel: I have a counter example, I'm making an app and want the user agent
to be able to use the alpha channel of a given image.
dbaron: I think I might lean towards agreeing with BK, because this feels
like the type of feature where we spend a lot of work implementing
something that doesn't quite do what authors want, so nobody uses it.
dbaron: Prefer to disable box-shadow
ChrisL: I have an example not linked in which puts a drop shadow on the
source; the slicing is then wrong
dbaron: yes, can't get that with the author making their own shadow in the
source image
Daniel: Shadows not aligned with circles, so slicing will mess up the shadow.
Would need two images, one for the shadow and one for the image itself
SteveZ: If images distort the shadow distorts differently
Daniel: Web designers want to apply the effects dynamically
ChrisL: Could animate the drop shadow. Lighting effect on mouse position for
example
<sgalineau> example of ChrisL's dynamic shadow update based on mouse position
with text-shadow:
<sgalineau> http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
Brad: Agree it's powerful, but should be a separate property that works on
all images
SteveZ: how about renaming the property border-shadow instead of box-shadow
fantasai: everyone is using this property already, so its hard to change
even with vendor prefixes
dbaron: people will have to border-image change anyway
ChrisL: Creating a version of the image with drop-shadow and then slicing
and tiling it was really gross; snippets of shadow tiled across the
center
fantasai: I think WebKit's problem with the border-image changes was that
they're using it in applications in WebKit-only OSX environments,
not just on the Web.
fantasai: In these applications the spacing is more critical
dbaron: I think the reason the change would cause more breakage for iPhone
(etc.) applications than Web pages is that Web pages aren't using it
because not all browsers support it yet
ScribeNick: fantasai
Chris: I had a section in the document that shows the result with a solid box
Chris: to show that it's the same as with drop-shadow on a solid border
Brad: Already starting to think about what it currently does with box-shadow
Brad: It doesn't follow the alpha-image of the actual border
Brad: not using alpha channels
CL: alpha-image of a solid rectangle is a solid rectangle
Brad: But it's not if it's dots or dashes
Brad: For this image seems like you can't slice it very well
Brad: But for a lot of things I would use, e.g. for fancy corners on a
straight-edged box
Brad: would be able to use the images for the shadow
Chris: I think when you actually try it, it won't work
Peter: I'm sure there are some images where it would look right, but a lot
where it wouldn't
<sgalineau> can someone post the lamp demo page ?
<fantasai> http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html
Brad: Either way you are going to be restricted
Brad: E.g. in Chris's example you can't create complex effects
Brad: Restriction on my way is that you can't animate it and certain types
of images where you have a big corner and things narrowing as they
come towards the corner.. that would be something you can't do with
my way
Steve: There's nothing that prevents someone from /not/ adding the
drop-shadow and putting it in the image
Brad: But then you can't use drop-shadow as a fallback
fantasai: I think that's less important than being able to get these cases
right
fantasai: We have a large chunk of use cases that can only be achieved by
including the shadow in the image, and also a large chunk of use
cases that can only be achieved by dynamically applying the border
fantasai: Using box-shadow as a fallback only gives you marginally better
results than not having it available, and I don't think that margin
is as important as being able to handle both chunks of use cases
here.
fantasai: Also image fallback isn't specific to this feature. Maybe we could
use media queries in the future to detect images being turned off.
Peter: I think box-shadow and border-image are separate things and I don't
think they should be combined like this.
Peter: I think we should have a border-shadow property instead.
Peter: Put a switch on it to get different behaviors.
<ChrisL> so then the dashed borders would also behave like this?
Steve: I like the solution that has border-shadow apply to both regular
borders and image borders
Steve: and box-shadow does what it does now
<dbaron> Brad: ... where box-shadow is not drawn when there's a border-image.
* Bert wonders when somebody will suggest border-light-sources,
border-ambient-light, border-viewer-distance, border-reflectivity,
border-transform, border-texture, border-backside-color...
Chris: So are we going to move forward with border-shadow now, or reserve
that for a future version?
* fantasai use SVG filters
* dbaron agrees with Bert that more general mechanisms would probably be
good here
Chris: Are we adding this now?
Chris: Just copy the box-shadow property definition and tweak it
Chris: spread for arbitrary images is not defined
Brad: We also talked about having switches in the property, might delay CR
<ChrisL> i'm hapy to add a border-shadow to the spec, and add an example
that has a dashed border
dbaron: We also need to get this discussion on www-style
fantasai: I want to make sure roc and hyatt agree with whatever we decide
to do here
Steve: update Chris's proposal document to include border-shadow
Brad: They can also read the minutes of this meeting, too, right?
fantasai: Why not put the switch on box-shadow?
fantasai: You wouldn't use both properties at the same time anyway
ACTION: clilley to revise the border-image-and-box-shadow proposal to make a
border-shadow proposal, them make public
Steve: In your examples, the shadow didn't look like it was on the box, it
looked like it was on the border
Steve: I would prefer Chris write it up as a separate property and then
suggest that it could be merged
<ChrisL> I can revise the proposal and make it public for Friday
Publication Status for Flexbox and css3-images
----------------------------------------------
Bert: Will be officially published tomorrow
Bert: longer answer is, I had to fix markup errors in the drafts, so next
time you update do cvs update first
Percentage Corners
------------------
ScribeNick: ChrisL
Topic: Percentage corners
fantasai: Add this or defer? Already added in Mozilla and they will be
removing the vendor prefix soon
fantasai: I prefer to defer it as we decided earlier, but wondering if it's
possible for Mozilla to remove at this point or if we have to
define this so it doesn't conflict with whatever we spec later on
dbaron: Should be possible to remove it
dbaron: Just need to remember to remove it when we drop the -moz- prefix
Peter: This has been implemented since the 90s
dbaron: Don't recall seeing actual uses of it
Peter: Was added to support things like MacOS buttons
BK: Will the prefix form continue to be supported?
dbaron: probably not
Peter: What's the problem with having percentage values in there?
fantasai: There are two differing interpretations of what a percentage means
Brad: Suggested on www-style how to handle them
... one is based on width, ohter is based on the relevant side
dbaron: Agree with Hakon and say they are always based on width or height
... if you want a particular shape you will use particular units
Brad: How do you get ovals?
* sgalineau would not be surprised if some authors filed a bug when they got an oval...
dbaron: One radius always based on width the other based on height
SteveZ: So its based on the border thickness?
dbaron: No the size of the box
<dbaron> so you'd get a circle with border-radius: 50%
<dbaron> or an ellipse
<dbaron> depending on the shape of the box
Brad: If you want quarter-circle corners that are not ellipses, then you
don't use percentages
Brad: 10% height is different from 10% width
Brad: So if you want quarter circle corners, you just can't use percentages?
Peter: The only thing you couldn't get that way is a percentage-based curve
that is always circular
Peter: I kinda like Brad's idea that the percentage is always based on the
width if you only specify one percentage
fantasai: Normally if there are two values and you can drop one, it's
duplicated, but does not give different behaviour
... so this is not like other shorthands
SteveZ: Its duplicating the computed value, not the specified one
Peter: Another way to get that would be to have a width unit. 0.5width
Peter: Or make new units like a width unit. 0.5W
Peter: width: 50% is the same as 0.5W
... could be introduced down the road
fantasai: Apparently Opera also has percentages implemented
Bert: Any other case where you want percentages, apart from elliptical boxes?
<anne2> (if this is about borders, we might have removed those due to compat issues)
<anne2> (supporting percentages there, that is)
<fantasai> anne2, yes, this is about borders
<anne2> (sites were using it expecting it not to work)
<sgalineau> i believe i've seen border-radius used to make a circle
Peter: Mac buttons with rounded ends irrespective of button length
Bert gives an example of resizing his window so the box resizes. The size of
the curve increases until it cuts throught the padding and overlaps the
text.
Bert: I don't want things like that.
...
SteveZ: If I make the corner a constant size and make the box bigger the
corner becomes more square. Don't want that
fantasai: Anne says percent border radius might have been removed from Opera,
SteveZ: not been in a released build anyway
SteveZ: Like Brad and Peter's suggestion with the single value
Peter: Not hearing consensus, out of time
<RRSAgent> I have made the request to generate http://www.w3.org/2009/07/22-CSS-minutes.html
<fantasai> dbaron, what do you think of the # of values solution?
<dbaron> fantasai, I think it's ugly but I can live with it.
Received on Wednesday, 22 July 2009 21:02:19 UTC