RE: RFC: ability to assign images to corners

For rounded corners, what about something like this:

   border-corner-top-right-edge: square | rounded
   border-corner-bottom-right-edge: square | rounded
   border-corner-bottom-left-edge: square | rounded
   border-corner-top-left-edge: square | rounded
   border-corner-edge: [square | rounded]{1,4}

Note the default would be square.

Note that border-corner-edge can be used to define the edges of all 4
corners, in this order: top-right, bottom-right, bottom-left, top-left.
If only one value is entered, it applies to all 4 corners. Two values:
top-right and bottom-left edges are set to the first value, bottom-right
and top-left edges are set to the second value.  Three values: top-right
is set first, then bottom-right, then bottom-left.  Four values:
top-right, bottom-right, bottom-left, top-left respectively.

Note that it would seem to make sense that in a two value case, the
top-right and top-left edges would use the same value, and the
bottom-right and bottom-left edges would use the same value.  In that
case, the order would be changed to top-right, bottom-right, top-left,
bottom-left.  But to be consistent with the way other borders are
applied, I used opposite sides instead.

   border-corner-top-right-width: [thin | medium | thick | <length> |
adjacent]
   border-corner-bottom-right-width: [thin | medium | thick | <length> |
adjacent]
   border-corner-bottom-left-width: [thin | medium | thick | <length> |
adjacent]
   border-corner-top-left-width: [thin | medium | thick | <length> |
adjacent]
   border-corner-width: [thin | medium | thick | <length> | adjacent
]{1,4}

Note that adjacent would mean to match the border width of the side that
it was touching.  For example, if the border-top-width was 5px and the
border-right-width was 1px and the border-corner-top-right-width was
"adjacent", then the upper left had side of the corner (touching the top
border) would start out as 5px wide and would decrease to 1px wide where
the lower right hand side of the corner (touching the right border)
ended.  The default value would be adjacent.  

Note that border-corner-width can be used to define all 4 corner widths,
and they are applied using the same method as border-corner-edge.

   border-corner-color: [<color> | adjacent]{1,4}

Note that border-corner-color can have 4 values and they are applied
using the same method as border-corner-edge.  "adjacent" will use the
color of the border that is touching the corner.  For example, if the
border-top color was red, and the border-right color was blue and the
border-corner-color was "adjacent", then the upper left hand side of the
corner (touching the top border) would start out as red and a gradiant
would change it to blue where the lower right hand side of the corner
(touching the right border) ended.  The default would be adjacent.

   border-corner-style: [none | dotted | dashed | solid | double |
groove | ridge | inset | outset | adjacent]{1,4}

Note that border-corner-style can have 4 values and they are applied
using the same method as border-corner-edge.

   border-corner-raduis: <length>{1,4}

Note that border-corner-radius can have 4 values and they are applied
using the same method as border-corner-edge.

   border-corner-top-right: <border-corner-top-right-edge> ||
                            <border-corner-top-right-width> ||
                            <border-corner-color> ||
                            <border-corner-style> ||
                            <border-corner-radius>
   border-corner-bottom-right: <border-corner-bottom-right-edge> ||
                            <border-corner-bottom-right-width> ||
                            <border-corner-color> ||
                            <border-corner-style> ||
                            <border-corner-radius>
   border-corner-bottom-left: <border-corner-bottom-left-edge> ||
                            <border-corner-bottom-left-width> ||
                            <border-corner-color> ||
                            <border-corner-style> ||
                            <border-corner-radius>
   border-corner-top-left: <border-corner-top-left-edge> ||
                            <border-corner-top-left-width> ||
                            <border-corner-color> ||
                            <border-corner-style> ||
                            <border-corner-radius>

   border-corner: <border-corner-edge> ||
                  <border-corner-width> ||
                  <border-corner-color> ||
                  <border-corner-style> ||
                  <border-corner-radius>

So then to define a box with a 1px red border and rounded corners with a
10px radius...

{
   border: 1px solid red;
   border-corner: rounded adjacent adjacent solid 10px;
}


There may be some problems with this model in that two of the values can
contain adjacent, and two of the values could contain px values (width
and radius), so more work needed there obviously (I got rushed at the
end of this or I would have touched up some).

Anyway, this does not cover using images, but I think it would be a good
starting point.  Any thoughts?  Comments?

Regards,
Peter Foti




> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org]On
> Behalf Of Bert Bos
> Sent: Thursday, February 21, 2002 1:09 PM
> To: www-style@w3.org
> Subject: Re: RFC: ability to assign images to corners
> 
> 
> Vadim Plessky writes:
> > On Wednesday 20 February 2002 20:14, Robert Koberg wrote:
> > |   I would like to have a box on the page that uses 4 
> uniques corners. I
> > | would also like the borders to be assignd unique images 
> that can tile so it
> > | can be any height or width.
> > |
> > |   *-----*
> > |   |       |
> > |   |       |
> > |   *-----*
> > |
> > |   best,
> > |   -Rob
> > 
> > I second back this proposal.
> > Besides, you should be able to change those borders 
> (corners) dynamically, 
> > with mouse :hover or for :focus / :active state
> > Traditional Windowing Environment is dieing, web becomes 
> more and more 
> > important. We should implement in CSS (Visual 
> Rendering/Behavior) best 
> > features of legacy windowing environments, like MS WIndows, 
> X-Windowing 
> > System or MacOS.
> 
> The CSS WG also likes it and in fact decided a few months back to try
> to write a draft[1] about it. However, from *liking* it to actually
> coming up with a consistent and implementable specification is quite a
> long way. Corner pieces are relatively OK, but the edges may contain a
> fractional number of tiles, what do you do then? Scale the tile? Scale
> the element's content? Crop the tile? All of those? And how do you
> keep the CSS rules simple to write? There are already quite a number
> of border properties, we'd like to avoid that we get two dozen more...
> 
> Of course, the best way you can help is to send concrete proposals.
> 
> [1] http://www.w3.org/Style/CSS/current-work#borders
> 
> 
> Bert
> -- 
>   Bert Bos                                ( W 3 C ) http://www.w3.org/
>   http://www.w3.org/people/bos/                              W3C/INRIA
>   bert@w3.org                             2004 Rt des Lucioles / BP 93
>   +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
> 
>

Received on Thursday, 21 February 2002 15:33:47 UTC