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.
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.
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 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.
The 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.
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.
Perfect Font Fallbacks
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!
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.
Editable Style Blocks
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.
Hard Stop Gradients
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.
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.
Pin Scrolling to Bottom