This week we have some inspiration in the form of dynamic graphic novel illustrations using clip-path, and the Layout Lab put together by Jen Simmons to accompany her presentations. I'm very much a developer so really enjoy seeing the creative uses of these new techniques. If you build something interesting let me know so I can link it up here!
We also have a lovely sponsor this week - Industry Conf. I'm unable to attend this year but I have spoken at Industry in the past, and also attended the conference. You'll be sure to come away feeling inspired and refreshed with new ideas for your work.
Rachel Andrew, CSS Layout News
A nice demo and walkthrough of how to create a graphic novel illustration in CSS using clip-path.
A handy blog post explaining the perspective property related to CSS Transforms.
If you build complex sites and applications, and in particular those that use third-party or otherwise self-contained widgets then you may well find container queries of interest. Here are some details of using
contain:strict but do check out Michael's earlier post for more use cases.
Various unimplemented parts of the CSS Grid Layout specification are making their way into browsers, and I was excited to see that the auto-fill keyword and minmax() function are appearing. I wrote up a quick explanation of how auto-fill and minmax enable flexible sized, and flexible numbers of tracks.
An experiment in sharing background gradients across multiple elements using CSS.
Jen Simmons has a whole host of interesting layout examples in her Experimental Layout Lab. It includes the demos for several of her excellent talks on the subject.
10 tickets left for the practical web conference taking place in Newcastle upon Tyne next week!
For four years, Industry has been packed with practical content and techniques covering everything from design to front-end web development. This year we welcome speakers from GDS, Salesforce, Facebook and more.
Join us on the 20th April in Newcastle, get your ticket now.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.