Rotating background images for list items

[jbowers]

Thanks in advanced for any and all help. I’ve been visiting css-tricks.com for a while, bought Chris’s Digging into WP book, and have been a fledgling web designer for a long time (I should have leveled by now…). I haven’t been active in the forums and such until now though as I’m usually able to find the answer to most of my questions.

Anyways, I’m having an issue and I’m not sure if what I am trying to do is possible using just CSS. I’m trying to save some KB in load time for a graphic-intensive website I’m designing by using a single image instead of several. What I have is an unordered list for my site navigation. Behind the actual text for each list item, I have an image of a wooden plank. In my mockup, I have that same image flipped horizontally and/or rotated 180 degrees and then offset some to the left and some to the right to give it a rustic, thrown-together look. I’m trying to emulate this in my CSS without the need for more than this single background image.

I’m trying to tackle the horizontal flipping and rotating of the background image before anything else. The issue I’m running into first and foremost is making only the background image of the list item rotate/flip and not the actual text/link. Here’s my first attempt at the CSS:

#navlist ul {

list-style: none;

margin: 0 auto;

padding: 0 0 10px;

}



#navlist li {

font-family: 'Corben', Georgia, serif;

font-size: 20px;

text-shadow: 1px 1px #666, -1px -1px #444;

text-align: center;

height: 50px;

padding: 0 0 20px;

}



#navlist li.nav1 {/* Standard */

background-image: url('../images/navbg.png');

background-repeat: no-repeat;

}



#navlist li.nav2 {/* 180 Rotate */

background-image: url('../images/navbg.png');

background-repeat: no-repeat;

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

}



#navlist li.nav3 {/* Horizontal Flip */

background-image: url('../images/navbg.png');

background-repeat: no-repeat;

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

}



#navlist li.nav4 {/* Horizontal Flip + 180 Rotate*/

background-image: url('../images/navbg.png');

background-repeat: no-repeat;

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

}



#navlist a {

display: block;

color: #9b0b0b;

text-decoration: none;

}



#navlist a:hover {

text-shadow: black 0.1em 0.1em 0.2em;

text-decoration: none;

}



#navlist a:visited {

color: #432a0a;

text-decoration: none;

}

As a note, this is still obviously in development, so I haven’t really cleaned it up yet. My actual HTML is just an unordered list with id=”navlist” and each list item has a class of nav1 – nav4. I understand that the entire list item is taking on the CSS transformations, but is there an easy way to separate the two, so only the background image of the list item changes?

If there’s not a CSS-only way to do this, what would you recommend? Also, after the flip/rotate effects take place on the background, how could I offset them to the left and right of the centered text for the navigation links?

Thanks,

Justin

[TheDoc]

With what you’re trying to do, you’d be better off having separate images (if they are being used in an unordered list, I can’t imagine the file size is that large).

What you need to do is rotate the li and then rotate the link in the opposite direction so that it evens out.

Something like:

#navlist li.nav2 {/* 180 Rotate */

background-image: url('../images/navbg.png');

background-repeat: no-repeat;

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}



#navlist li.nav2 a { /* Flip the text back */

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

Don’t forget to add in the generic ‘transform’ – I’ve added it in the above example.

[noahgelman]

Dont forget for IE as well. It needs a filter to rotate images.

/* for ie */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Regarding the “rotation=3” part, You use 1-3 to tell how many times you want to rotate the image in 90 degree increments. I believe it rotates clockwise

[jbowers]

Simple as ever @TheDoc – target the a tags and just rotate/flip them again. I really appreciate the help. It fixed the issue with flipping the text/links. I would use multiple images for this, but the website is already getting quite large with all of the current images.

Thanks @noahgelman for the tip for IE as well.

So, I still have to play with the positioning as the images and links are off a bit, but is there a way to offset the background images via the li class so that some float a little to the left and some to the right of the list of links?

Thanks again,

Justin

[Author]

Posts