Posts Tagged: images

Bookmarklets for accessibility testing

Posted July 25th, 2013 by Zoe Gillenwater & filed under Articles.

I’ve created two simple bookmarklets to reveal whether CSS background images are being used in an inaccessible way on a page. Use them yourself, or help me learn how to improve them.

Me at The CSS Summit online conference

Posted July 18th, 2009 by Zoe Gillenwater & filed under Announcements.

Download the slides from my presentation at The CSS Summit online conference, as well as get links to related tutorials on designing flexible images.

CSS effect: space images out to match text height

Posted June 30th, 2009 by Zoe Gillenwater & filed under Tutorials.

Make several fixed-width images change their spacing to stay lined up with accompanying text, no matter the window size or text size.

Voices That Matter: Web Design Conference 2009

Posted April 28th, 2009 by Zoe Gillenwater & filed under Announcements.

Download the slides from my presentation at Voices That Matter: Web Design Conference 2009, as well as get links to related tutorials on designing flexible images.

Creating sliding composite images

Posted April 27th, 2009 by Zoe Gillenwater & filed under Tutorials.

Create the appearance of a single image by layering multiple images on top of each other. The pieces can slide around the page as its width is changed, making it a perfect technique for liquid layouts.

Hiding and revealing portions of images

Posted April 25th, 2009 by Zoe Gillenwater & filed under Tutorials.

It’s possible to dynamically “crop” both background and foreground images as the layout changes in width, solving the problem of overflowing fixed-width images in a flexible page.

Foreground images that scale with the layout

Posted April 24th, 2009 by Zoe Gillenwater & filed under Tutorials.

Simple CSS techniques can make the content images inside your liquid or elastic pages scale with the layout.