My latest post: CSS effect: space images out to match text height
Make several fixed-width images change their spacing to stay lined up with accompanying text, no matter the window size or text size.
I’ve been on my soapbox a lot lately, so I decided it was time to step down for a bit and do a nice, non-controversial CSS tutorial. Wouldn’t you agree?
The inspiration for this tutorial came from the “Who we are” page on the Clearleft site. Try resizing the text—only the text, not the whole page—and notice how the photos move farther apart and closer together. They always stay aligned with the names they go with, and the overall height of the photo block never gets too far off the height of the block of text to the left. So, the design always appears balanced.
The images remain the same size but change their spacing as the text size changes.
I love this effect; it’s a very clever way to fill up the entire available space with images without having to actually scale the images. It’s basically another take on what I call sliding composite images. There are an unlimited number of ways to create sliding composite images—background positioning, absolute positioning, margins, etc—but I wanted to share one way to accomplish the particular effect shown on the Clearleft site. Luckily, it’s really quite simple.
(more…)
Heads up
I'm speaking at the CSS Summit online conference on July 18. Find out how to save on your registration.
My recent posts
- Nicole Sullivan speaking about OOCSS at the CSS Summit
- Learn about Object Oriented CSS from Nicole Sullivan at The CSS Summit online conference, July 18, 2009.
- Why browser zoom shouldn’t kill flexible layouts
- All the major browsers now have zoom functions built in, which may make it seem like there’s no longer any need for liquid or elastic layouts. Not so.
- Speaking, near and far
- I’m speaking at The CSS Summit on July 18, and here in Chapel Hill, NC, on June 4.