RE: Mirror as background property

Tab Atkins Jr. wrote:
| I propose a new background-* property, background-mirror, which takes
| the values "mirror-left", "mirror-right", "mirror-top",
| "mirror-bottom", and "no-mirror".  It defaults to "no-mirror", and
| will be set to that value if unspecified in the background shorthand
| property.
| 
| The effect of this property is to divide the *box* (not the image) in
| half either vertically (mirror-left and mirror-right) or horizontally
| (mirror-top and mirror-bottom), then take the entire image in the
| specified half of the current background layer and mirror it to the
| other side.  So, for example, specifying mirror-left will split the
| box vertically down the center, take the entire background layer on
| the left half, and mirror it onto the right half.  "no-mirror" applies
| no mirroring.
| 
| In the rendering chain for backgrounds, this property is applied last,
| after the background is sized, positioned, repeated, and otherwise
| specified.

Hmm, I kinda prefer the more general background-flip I described earlier.  But, in any case, what's the need for 4 directions? Mirror-x and mirror-y (and just plain 'mirror' for left-to-right *and* top-to-bottom) is easier to remember. Background-repeat goes top->bottom and left->right, it seems sufficient for mirroring to do the same.

Background-flip can be useful. Here's a use case:

http://hpaa.com/csstest/bgflipwithgradient.htm

Sure, the effect is commonly done with an image editor, but why not save time plus 50% on image size and do it with CSS? Flipping an image is pretty trivial.

David Perrell

Received on Sunday, 30 August 2009 01:05:20 UTC