This is a compendium of some of my favorite tricks I’ve come across in my time working on the website CSS-Tricks. Most of them are not my own, but by people far more clever than me. Here I’m showcasing them and explaining the trick as I see it. While perhaps some of them are more “useful” than others, there is a lot to learn from all of them, whether you ever use the technique directly or not.
One trick, that's not covered explicitly in this book, is the trick of "CSS drawings". I've seen thousands of these over the years, especially as I watch people play in learn on CodePen, another site I help run. They range from people making a smiley face with circles they build with
border-radius: 50%, background colors, and absolute positioning, to honest to god trump l'oeil masterworks make with gradients, shadows, and every CSS technique under the sun. Why? People inevitably ask. Why use CSS for this when you could use SVG? Or use drawing software specifically designed for producing art? Why not? might be a better question. Art need not be shackled by the bounds of what someone might think is more efficient. But more importantly, and the irony is thick here, I find the people that do these sorts of CSS drawings and explorations, however "impractical", end up better practitioners of CSS in "practical" matters as well.
So enjoy these CSS tricks, friends! I hope they bring you a little joy, and even if you can't use them in your work immediately, your knowledge of them will make you a more crafty CSS developer perhaps without you even realizing.
Funny word, right? It's a visual effect that makes an element kinda wiggle squiggle jiggle in place giving it a sort of uneasy, but extremely unique feel.
The word "gradient" implies a transition from one color to another color. That's super useful in web design and can create lovely effects. We're going to skip that whole "transition" part though and see what kind of CSS trickery that unlocks.
We know that different HTML elements do different things. That's obvious when we can see them. But some HTML elements operate behind the scenes and sometimes we just don't think about them as being related to elements that are intended to be visual. But let's take a little trip into making some elements visual that aren't by default and how weird (and maybe useful!) it can get.
Perhaps my favorite CSS trick of all time! This one makes use of four layered background gradients that reveal shadows on the top and bottom of containers that scroll to indicate you can scroll in that direction. It's just good UX, and even moreso now than it was in 2012 when it was invented as scrollbar-less UIs are more and more common.
Thankfully, we have a lot more control over font loading these days. We no longer have to force our users to wait for a font to load before showing them text, we can swap it out as the font loads. But that swap can be visually rough with lots of abrupt shifts and reflow. We can fix that though!
It looks like a little bit of magic to watch a shape draw itself on the web. Or like it's probably an embedded video. But it doesn't have to be! In fact, with remarkably little code and an awfully clever technique involving stroke dashes and offsets, we can do it on any SVG path.
box-shadow property is obviously useful for light shadows behind elements providing a sense of dimensionality and separation. But
box-shadow had some tricks up its sleeve, particularly with how a box shadow doesn't need to be soft, can be stacked, and doesn't even need to be particularly nearby.
There are triangular unicode characters. You could draw a triangle in SVG. But there is another way to draw a triangle on the web, involving nothing but the border property and a little CSS trickery.
Perhaps the greatest trick in all of CSS grid is being able to write a column layout that doesn't explicitly declare the number of rows or columns, but automatically creates them based on somewhat loose instructions and the content you provide.
There are a number of ways we can animate or transition one shape to another on the web. I'm not talking about rotating an arrow or enlarging a checkmark, I'm talking about watching a shape move the very points it is made from to new places.
When a hash-link is used on a website, the page scrolls to the position where the element being linked to is visible. But is that entirely clear? Sometimes it's jarring and confusing. The Yellow Flash is an idea to highlight the element being linked to briefly to guide the eye to it and make sense of a confusing situation.
That's it for this volume, folks! I'd very much like to keep making new volumes, and I've got some tricks I'm eyeballing already of course. But if you've got some you think are worth of entombing here, please let me know!