- From: fantasai <fantasai@escape.com>
- Date: Sat, 09 Mar 2002 00:45:42 -0500
- 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 UTC