“Flexible Captioned Slanted Images” at 24 ways
Published 4 years, 10 months past
We have a lot of new layout tools at our disposal these days — flexbox is finally stable and interoperable, and Grid very much the same, with both technologies having well over 90% support coverage. In that light, we might think there’s no place for old tricks like negative margins, but I recently discovered otherwise.
That’s the opening paragraph to my 24ways piece “Flexible Captioned Slanted Images”, which I now realize I should have called “Accessible Flexible Captioned Slanted Images”. Curse my insufficient title writing! In just about 2,000 words, I explore a blend of new CSS and old layout tricks to take an accessible markup structure and turn it into the titular slanted images, which are fully flexible across all screen sizes while being non-rectangular.
It’s just my second piece for 24ways, coming a dozen years and a day after the first — and is very possibly my last, as Drew closed out this year by putting 24ways on hiatus. Fifteen years is a heck of a run for any project, let alone an annual side project, and I salute everyone involved along the way. Content is hard. Managing content is harder. Here’s to everyone who put in the time and energy to make such a valuable resource. If you’ve never been through the 24 ways archives, now’s your chance. I promise it will be very much worth your time.