[CSS3 Backgrounds] Simple property that reduces amount of images needed.

Being able to reduce the number of images needed would be at least as great of a step forward as reducing the number of elements needed for backgrounds. With this new property one would be able to use just 2 images instead of 8 for a completely flexible box. 

background-transform: [flip-x flip-y rotate-l rotate-r rotate]

The property takes one keyword value out of the 5 above. 

flip-x will flip the image horizontally to a mirror image so that the one left corner graphic can be used as the right corner also.

flip-y will do the same but vertically

rotate-r will roate the image 90 degrees to the right.

rotate-l 90 degrees to the left.

rotate will rotate the image 180 degrees.

This property could allow one corner graphic and one edge graphic to be used in place of 4 corners and 4 edges on a flexible box and could also be used for some decent and efficient hover effects.


Received on Tuesday, 18 November 2008 08:21:29 UTC