CSS Sprites for Drupal Themes
- 10 Comments
- Latest Comment
What is a CSS sprite? In short a CSS sprite is one big image combining all the images used in a theme or web site template. So instead of having loads of separate little images, you combine them into one.
For an example Yelvington posted a really good example of CSS Sprites - take a look at his example sprite.
So how do we use these sprite images? The secret CSS sauce is background-position. You call the image only once and then use background-position to move it around to only show the bits you want.
A real easy example is for hover effects on links. Say you have an icon that is gray, but on hover you want to show a colorized version. The old way would be to have two separate images, but that sux for performance and theres always a lag for the image to download when you first hover the link (unless you preload the images with JavaScript).
With one CSS sprite the image downloads with the page load, and background position merely shifts the colorized version into view on hover. Heres a code example:
#nav li a {
background-image:url('images/my-kickass-sprite.png');
background-repeat: no-repeat;
}
#nav li a:link,
#nav li a:visited {
background-position:5px 5px;
}
#nav li a:hover,
#nav li a:focus {
background-position:5px -30px;
}
#nav li a.active {
background-position:5px -60px;
}Note that in the above code example li a.active is correct, this is a standard Drupal class applied to active menu links.
As you might well be thinking this can take a fair amount of shagging about with the actual sprite and the CSS. However the performance benefits are great and if, like me, you stick to using a grid to position your sprite images the CSS is not that hard to figure out.
I found a pretty good example tutorial about CSS sprites here http://css-tricks.com/css-sprites/
Drupal Version:
Drupal Development:
Drupal:
URL:
Social Tags:
Calais Document Category:
Comments
#2 Forum images
I first noticed this when disecting phpbb themes to see what bits I could use in Advanced Forum styles. It’s a pretty interesting technique and I ended up ripping out all the image handling in AF to make it possible to use it. I haven’t gone all the way to putting all the images on one image, but it should be possible to do if someone wanted to in their style.
Michelle
#3 How to assemble sprites??
One big limitation to sprites is the process of creating them. I understand that one can build the sprite in an image program directly, but that requires a lot of forethought and is a separate process from actually creating the website design. Wouldn’t it be better if sprites could be assembled from slices generated by programs like Photoshop? That way, the slices could be generated from the website mockup, then a program could assemble the slices into a sprite. That would kill two birds with one stone.
Does anyone know of a script or program to assemble slices into a single image?
Just a thought.
#5 Comments on Comments
First when I use them, its pretty much hard coding menu links into the page.tpl.php file. Haven’t thought of a way to make sprites more flexible. Example here: http://www.mnitcareers.org along bottom. To change links though I have to change a template file.
3 don’t really agree. Just design your men to look how you want - export a single image amd the rest is CSS. No generators are really needed.
#7 I’m curious about something…
I’m curious about something… I use a really narrow (1 pixel wide) image and repeat it horizontally to fill in behind block titles and such. Is that something that you can do with sprites, or do those need to be done the old fashioned way?
Michelle
#9 That’s what phpbb does for
That’s what phpbb does for its buttons. What I was referring to is when you give the illusion of a bar by repeating the same 1 pixel image over and over. I didn’t think that was doable with the sprite method but was curious if there was a way I was missing.
Thanks,
Michelle
#10 yes … what he said .. just
yes … what he said .. just stack them vertically and do not block them horizontally if your doing a horizontal repeat, the opposite for the other way around.
Its not really desirable to place all your images into one giant sprite, really its most useful for a blocks of relevant imagery. So in the end you wind up with a series of sprites, one for the main site interface with common buttons framing base theme stuff. Others could be for singular interfaces that only appear in one or fewer areas of the site, or are not logical to be called on every page load. I also split mine by some needing to be transparent pngs or optimized jpg’s.
In the end its not that everything goes together but its surely a lot more modularized than tons of individual files. And as an added bonus it makes altering the sites theme a little easier if your not planing on changing the structure much you could simply swap out the main sprites with a tweaked version, for a quick change.
#1 Im just starting to use them
Im just starting to use them in my themes now … it truly makes a difference on http requests. Im doing a transparent png for all the clearish bits and a jpg to handle the rest. It does take a bit of thought to fit repeating bits n such but IMO it’s well worth it, besides it saves on having to slice things up as much!
The yslow firebug addon is what turned me onto them … well besides the sliding door stuff thats been around forever. Funny the sprites concept comes from old video games, im glad someone had the inspiration to use them this way. Servers everywhere are breathing a collective sigh of relief!