W3C home > Mailing lists > Public > www-style@w3.org > March 2002

Re: RFC: ability to assign images to corners

From: fantasai <fantasai@escape.com>
Date: Sat, 09 Mar 2002 00:45:42 -0500
Message-ID: <3C89A186.67565F20@escape.com>
To: www-style@w3.org
Bert Bos wrote:
> 
> fantasai writes:
> [proposal omitted]
> 
> This covers a lot of ground and I have to read it in more detail, but
> I think I noticed one thing missing: the ability to neither clip nor
> stretch the images, but put space in between.
> 
> This might be just another keyword for border fit.

ok, add 'space'

space - Repeat the image as close to filling the area as possible
        without overflowing, and space images out so that the tiling
        fills the area exactly.
 
> Another idea to consider, discovered by Tantek Celik, is that in many
> cases, the images are mirrored or rotated versions of each other.
> Including the possibility to mirror and rotate images in the syntax
> might or might not make the syntax easier.

It crossed my mind, but I thought it might be too complicated.
Let's see, though ...

border-topleft-image-transform: translate | rotate | reflect
initial: translate

This property determines how an image is placed on the corner. It
assumes that, whether or not they are individually assigned, the
corner images are designed for the top left corner; values indicate
how to modify the image for the other three corners.

translate - Place the image without modification.

rotate - Rotate the image so the sides that would be the inner edges
         of the image were it placed in the top left corner remain
         the inner sides.

reflect - Flip the image so the sides that would be the inner edges
         of the image were it placed in the top left corner remain
         the inner sides.

Shorthand: border-corner-image-transform: translate | rotate | reflect

Examples:
         border-corner-fit: 0;
         border-corner-image: url(box.gif);

                     ____
         box.gif -  |[]~~|
                    |___\|

         border-corner-image-transform: translate;
          ____________________________
         |[]~~|       \///       |[]~~|
         |___\|__________________|___\|
         |    |                  |    |
         |    |      content     |    |
         |____|__________________|____|
         |[]~~|                  |[]~~|
         |___\|__________________|___\|


         border-corner-image-transform: reflect;
          ___________________________
         |[]~~|                 |~~[]|
         |___\|_________________|/___|
         |    |                 |    |
         |    |     content     |    |
         |____|_________________|____|
         |   /|                 |\   |
         |[]~~|_________________|~~[]|


         border-corner-image-transform: rotate;
          ___________________________
         |[]~~|                 |  []|
         |___\|_________________|/_}_|
         |    |                 |    |
         |    |     content     |    |
         |____|_________________|____|
         | { /|                 |\   |
         |[]__|_________________|~~[]|

Comments: Shorten to border-corner-transform (i.e. drop "image")?

          This property has no effect on the top left corner. I
          included border-topleft-image-transform for consistency.
          It could be dropped.


border-top-image-transform: translate | rotate
                            | reflect-xy | reflect-right | reflect-left
initial: translate

This property determines how an image is placed on the border.

translate - Place the image without modification.

rotate - Rotate the image so that the side that would face the inner
         edge if it were placed on the top border remains facing the
         inner edge.

reflect-xy - The image is assumed to be designed for the top/left sides.
         The right border image is reflected across a vertical axis and
         the bottom border image is reflected across a horizontal one.

reflect-right - The image is assumed to be designed for the top border.
         The right border image is rotated 90 degrees to the right; the
         left border image is rotated 90 degrees to the right and
         reflected across a vertical axis. The bottom border image is
         reflected across a horizontal axis.

reflect-left - The image is assumed to be designed for the top border.
         The left border image is rotated 90 degrees to the left. The
         right border image is rotated 90 degrees to the left and
         reflected across a vertical axis. The bottom border image is
         reflected across a horizontal axis.

Examples: 

        border-corner-fit: 0;
        border-image: url(chevron.gif); /* Assign chevron.gif to all borders */
                        _
         chevron.gif - |<|

         border-image-transform: translate;
          _____________________
         |_|<<<<<<<<<<<<<<<<<|_|
         |<|                 |<|
         |<|     content     |<|
         |<|_________________|<|
         |_|<<<<<<<<<<<<<<<<<|_|


         border-image-transform: rotate;
          _____________________
         |_|<<<<<<<<<<<<<<<<<|_|
         |V|                 |^|
         |V|     content     |^|
         |V|_________________|^|
         |_|>>>>>>>>>>>>>>>>>|_|

         border-image-transform: reflect-right;
          _____________________
         |_|<<<<<<<<<<<<<<<<<|_|
         |^|                 |^|
         |^|     content     |^|
         |^|_________________|^|
         |_|<<<<<<<<<<<<<<<<<|_|

         border-image-transform: reflect-left;
          _____________________
         |_|<<<<<<<<<<<<<<<<<|_|
         |V|                 |V|
         |V|     content     |V|
         |V|_________________|V|
         |_|<<<<<<<<<<<<<<<<<|_|

        border-image: url(chevron.gif) url(slash.gif);
                      _
         slash.gif - |/|

         border-image-transform: reflect-xy;
          _____________________
         |_|<<<<<<<<<<<<<<<<<|_|
         |/|                 |\|
         |/|     content     |\|
         |/|_________________|\|
         |_|<<<<<<<<<<<<<<<<<|_|

Comments: This property has no effect on the top border.


Because the transform properties can inherit unexpectedly, there should
be a shorthand property that sets at least both the image and the
transform, thus resetting the transform without forcing attention on the
property.

~fantasai
Received on Saturday, 9 March 2002 02:41:07 GMT

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