- 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