Posts Categorized: Tutorials

Full-width pinned layouts with flexbox

Posted July 29th, 2014 by Zoe Gillenwater & filed under Tutorials.

Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox’s re-ordering capabilities, we can make this layout pattern even more responsive.

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.

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.