Rotating images via CSS - doable?

Say I'm using PNGs to create rounded corner boxes... can CSS be used to
"rotate" the same PNG 3 times to cover all 4 corners, or must I link to 4
different images?

Must work in FF1+ & IE6+ in both Win/Mac.

..oO(Mike J.S.)

Say I'm using PNGs to create rounded corner boxes... can CSS be used to
"rotate" the same PNG 3 times to cover all 4 corners, or must I link to 4
different images?

You can't rotate an image with CSS, but sometimes you can combine
multiple images into a single one and use CSS to only show a part of it.
With a little thinking the techniques described on

Fast Rollovers Without Preload
http://wellstyled.com/css-nopreload-rollovers.html

and

CSS Sprites: Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites/

can also be used for corner and border images. But how and which images
can be combined also depends on the HTML structure and the elements they
are applied to.

I played around with that a while ago. A fully customized border around
a box (with 4 borders, 4 corners, all done with images) can be achieved
with only 4 image files and some CSS rules, as seen in this example:

http://mfesser.de/test/borders/

This (experimental!) example makes heavy use of child and adjacent
sibling selectors and PNG transparency, so it requires a modern browser
(no way in IE 6). There are only two images for the borders and two for
the corners. The rest (positioning, repeating) is done with CSS.

The CSS is "compressed" and narrowed down to the absolute minimum. I
recommend to use the DOM Inspector in Firefox (or a similar tool) to see
how it actually works and which CSS rules apply to which element.

Directory browsing is enabled to make it easier to have a look at the
used files:

http://mfesser.de/test/borders/images/
http://mfesser.de/test/borders/style/

HTH
Micha

Intriguing concept. I wonder if the added calculations of the code outweight
the loading of 1 image instead of 4.

Unfortunately, the site has to work on IE6 (and Mac) so it's a moot point,
but as I said, it's an intriguing concept.

"Michael Fesser" <netizen (AT) gmx (DOT) de> wrote

.oO(Mike J.S.)

Say I'm using PNGs to create rounded corner boxes... can CSS be used to
"rotate" the same PNG 3 times to cover all 4 corners, or must I link to 4
different images?

You can't rotate an image with CSS, but sometimes you can combine
multiple images into a single one and use CSS to only show a part of it.

..oO(Mike J.S.)

Intriguing concept. I wonder if the added calculations of the code outweight
the loading of 1 image instead of 4.

I think so. An additional HTTP request causes much more overhead and
delay than a rather simple CSS calculation.

Unfortunately, the site has to work on IE6 (and Mac) so it's a moot point,
but as I said, it's an intriguing concept.

It can be made work in IE6 (don't know about IE/Mac, I can't test it and
actually I don't really care about that one). It just requires some more
classes or IDs, because of IE's lacking support for the more advanced
CSS selectors. Instead of accessing an element just by using child or
other selectors, you would have to give it a class or ID. But the main
concept of having multiple images in one ("sprites") works even in IE.

Micha