Bookmarks (11) clear filters

What The Heck, z-index? — Another great post from Josh, this time exploring stacking contexts and the often tricky z-index property.

An Interactive Guide to CSS Transitions — This is an excellent and comprehensive guide to using CSS transitions. Covers the basics really well — but even if you’re a bit more experienced in working with CSS animations I'd say you’ll no doubt still learn something here.

Let's Bring Spacer GIFs Back — Back in the 90s spacer GIFs were a common hack put into practice to format web pages into shape — here, Josh explains a modern technique for solving layout problems.

The Rules of Margin Collapse — Adjacent margins in CSS can sometimes overlap. This is known as ‘margin collapse’, and Josh notes it has a reputation for “being quite dastardly”. This excellent, comprehensive, interactive tutorial dives into everything you need to know about it, covering the eight rules of margin collapse.

Chasing the Pixel-Perfect Dream — This term isn’t anywhere near as ubiquitous as it once was, but for times where design duplication is demanded, Josh asks how we can now go about it, how realistic such a request is, and shares some tricks to help us “scooch a bit closer to pixel-perfection”.

Full-Bleed Layout Using CSS Grid — Every era of Web design has its equivalent of the ‘holy grail layout’ and Josh looks at a modern readable and responsive way to lay out content while still offering full edge-to-edge for images, break out boxes, etc. This then provoked an equally useful response post about getting the same effect with simpler CSS.

Local Testing on an iPhone — You should be testing on a real-world mobile device, so here’s a nice and quick way to get your localhost server running on an iPhone with the help of ngrok.

Accessible Animations in React — An extensive look at using the prefers-reduced-motion media query (including using it with matchMedia in JavaScript) to disable animations for users who have that preference set.

CSS Variables for React Devs — A solid look at how to use CSS variables (custom properties) in your next project. (If you’re working with React, we have a newsletter for that too!)

Embracing Modern Image Formats: Leveraging WebP in HTML and React — A thorough look at how using next-gen image formats along with the <picture> element can reduce image sizes dramatically.

Folding the DOM: Using 3D CSS Transforms to 'Fold Up' Images — The ‘trick’ to creating an image folding effect with CSS transforms is to have multiple identical images and then transform them separately. This is a great, interactive tutorial that’s based around React, although the underlying CSS principles are usable anywhere.