Last year, Rachel Andrew wrote “[Take A New Look At CSS Shapes](https://www.smashingmagazine.com/2018/09/css-shapes/)” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “[Art Direction for the Web](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)” with CSS Shapes to create exciting and inspired new design ideas.
CSS Grid is wonderful for building multi-column layouts, but if you have one less item in your grid than you expected, it will look off balance. I'll show you how to center the last row.
WWhen inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. This article will help you understand how to overcome these limitations using CSS variables — and how you can start building with Container Units.
In July, I wrote about advanced CSS filters techniques, such as backdrop-filter and filter(). Today, I want to share a much more awesome CSS feature. But before starting, let me warn you: the feature I’ll show is only supported in Firefox for now and no other browser vendor has shown interest with. M…
If you hadn't seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing
Learn how to create CSS layouts that are self-governing, using Flexbox and Grid. Transcript: https://gist.github.com/Heydon/c0b1d088461c64370d6fe1a19bff4b9f
Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!
Managing Flow and Rhythm with CSS Custom Properties
Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet.
A few years ago I made a Venn diagram using floats and absolute positioning. It was fine. Nothing to really brag about, but it got the point across. I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided…
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.