Using CSS transitions on auto dimensions
Read NoteA selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to β¦
theAdhocracy
A selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to β¦
A few weeks ago I was lucky enough to spend a long weekend in Dartmoor. We ended up visiting Wistman's Wood for much of the first afternoon, which was so captivating we would have definitely spent β¦
I have recently fallen back into an old habit: League of Legends. The eponymous MOBA remains immensely addictive, fun and interesting, but above all else my return (after over a year!) has β¦
The new dominant layout methods in CSS β grid and flexbox β have solved a lot of issues. Still, sometimes the ideal layout is somewhere in the middle: a flexible grid-like mashup. With a bit of outside-the-box thinking, you can there from either angle.
A wonderfully illustrated and deeply informative article on responsive images on the web. π Also, Eric's worries about "none of this being implemented in any browser yet" are no longer relevant β¦
A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The β¦
What do you do when a website has loaded but the content is still being fetched from an API? One answer is to fill the page with animated placeholders, creating a skeleton of what the user can expect, with a dash of CSS animation to let them know that something's still going on behind the scenes.
Max has put together one of the best examples of how container queries will fundamentally change the way front-end development works. Better still, they provide extremely clear explanations of β¦
As far as years go, 2021 held some pretty big surprises and featured some fairly grown-up decisions. Life will never be the same again...
Animating a grid element provides a lot of potential for fancy UIs and interesting interactions, but it's not immediately obvious when searching online how it needs to work and what the limitations are.
A very thorough overview of how to write a modern, performant, HTML-driven image component that is as optimised to serve the most appropriate image as possible. There are some very neat tricks in β¦
A useful piece of research diving into the continued fragmentation of viewport and screen sizes across the web. I was actually one of the data points, as I saw the original call to arms (a clever β¦