Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

CSS effect: space images out to match text height

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.

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…)

Nicole Sullivan speaking about OOCSS at the CSS Summit

The CSS Summit on July 18 now has its final speaker: Nicole Sullivan! She’ll be speaking about Object Oriented CSS (OOCSS), a topic she first addressed at Web Directions North and which is getting a lot of praise and attention. I personally am really excited to see her presentation and learn more about OOCSS.

Registration for The CSS Summit is still just $139 for an individual and $439 for a meeting room (meaning, you can get a bunch of people together in one place and all attend the conference) through July 3. Use the code CSSZOEMG when registering to get $25 off. A percentage of the proceeds will go to the Children’s Organ Transplant Association.

Why browser zoom shouldn’t kill flexible layouts

Now that all the major browsers include the ability to zoom the entire page layout, rather than just increase text size, are liquid and elastic layouts obsolete? Can’t we just use fixed-width layouts and let the user zoom them if needed? The answer to that question depends on whether browser zoom solves all of the same problems than liquid and elastic layouts solve, and I don’t think it does.

Don’t get me wrong—it’s great that browsers have added this zoom ability. It’s yet another tool to give users more control to view web pages in a way that is most easy and enjoyable for them. But liquid and elastic layouts still offer a lot of benefits, as does plain old text resizing. Let’s go through the flexible layout benefits one by one and see if browser zooming on fixed-width layouts can deliver just as well.
(more…)

View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (40)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month