3 Replies Latest reply on Sep 10, 2007 5:24 PM by Newsgroup_User

    Rotating images via CSS - doable?

    Level 7
      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.


        • 1. Re: Rotating images via CSS - doable?
          Level 7
          .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
          • 2. Re: Rotating images via CSS - doable?
            Level 7
            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@gmx.de> wrote in message
            news:2kibe3lvaanhorrcr73ps1amc2d270kf53@4ax.com...
            > .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.


            • 3. Re: Rotating images via CSS - doable?
              Level 7
              .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