[css3] Suggestions and comments: Objects transformation & border images

Hello,

Various suggestions and comments:

About border images:
--------------------
I think the use of a single image for the borders is not appropriate. It
means if you want to change only the top border (the top left corner, 
top edge, and top right corner) of a div (or whatever), for example, you 
have to change the whole image. Plus, the numbers / percentage system is 
too complex. Maybe the use of 8 different images would be better in that 
particular case. You have to specify 7 more images, of course (well, if 
you want all the borders, that is), but it is easier and more flexible:

div {
    border-image-top-left: url("topleft_red.png");
    border-top: url("top_red.png") repeat-x;
    border-left: url("left_red.png") repeat-y;
    ...
}
div.bluecorner {
    border-image-top-left: url("topleft_blue.png");   //change only the
top left corner...
}

BTW, I don't think there is a need to allow one more background image
for the center here, the "background" type properties are enough for this.

Object transformation:
----------------------
It would be nice if you could apply basic transformations (vertical
flip, horizontal flip, 90 degree rotation, 180 degree rotation) to
objects, especially images. Something like:
transform: [vertical-flip | horizontal-flip] || [rotate-right | 
rotate-left | reverse] | none

<img src="theimg.gif" style="transform: reverse;">

The main interest for it is avoiding the use of more images than needed.
An example wich comes to mind is when using images as borders, you often 
put the same images, with flips or rotations applied. To continue the 
border-image example above:

    border-top-right: url("topleft_red.png") horizontal-flip;
    border-right: url("left_red.png") horizontal-flip repeat-y;

You could even do something like that:

    border-left: url("top_red.png") rotate-left repeat-y;
    border-right: url("top_red.png") rotate-right repeat-y;
Or, if top_red.png is not symetrical horizontally:
    border-right: url("top_red.png") rotate-left horizontal-flip repeat-y;

Of course, some of those are redundant "vertical-flip horizontal-flip"
and "reverse", for example.
There needs to be an (arbitrary) order to apply transformations. For 
example, rotations should be applied before flipping. I assumed this 
order with my last "border-right" example. I dunno if this is the best 
order, though.

That kind of basic transformations could be applied to other elements 
(for block elements, for example), though it would probably be hard to 
implement by the UAs.

Regards.

Received on Sunday, 11 December 2005 14:20:50 UTC