Skip to main content

Full Book

Chapter 1 Full Book

Chapter 2 Yellow Flash

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 3 Shape Morphing

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 4 Flexible Grids

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 5 Border Triangles

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 6 Scroll Indicator

There is a way you can build a progress bar displaying how far a user has scrolled down the page (like a "reading progress indicator") without any JavaScript at all. Just some clever usage of gradients and positioning.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 7 Boxy Buttons

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 8 Self-Drawing Shapes

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 9 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!
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 10 Scroll Shadows

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 11 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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 12 Draggable Elements

Dragging an element around the screen is something that is pretty firmly in the territory of JavaScript. You'll want access to DOM events like clicks and mouse movement. But we're here to talk CSS trickery so let's get it done in HTML and CSS alone!
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 13 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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 14 Squigglevision

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.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 15 Pin Scrolling to Bottom

In perhaps in the top 5 most annoying things a website can do is this. You're trying to read something (or click something!) and all the sudden the page shift underneath you (or you mis-click!). There is a CSS property that can help fix that. Plus, we can exploit it to do something that was previously exclusively in the realm of JavaScript.
To access this content, you must purchase MVP Supporter, or log in if you are a member.

Chapter 16 Scroll Animation

So let’s get that out of the way. With a JavaScript one-liner, we can set a CSS custom property that knows the percentage of the page scrolled:

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

Now we have --scroll as a value we can use in the CSS.

This trick comes by way of Scott Kellum who is quite the CSS trickery master!

Let’s set up an animation without using that value at first. This is a simple spinning animation for an SVG element that will spin and spin forever:

svg {
  display: inline-block;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Here comes the trick! Now let’s pause this animation. Rather than animate it over a time period, we’ll animate it via the scroll position by adjusting the animation-delayas the page scrolls. If the animation-duration is 1s, that means scrolling the whole length of the page. is one iteration of the animation.

svg {
  position: fixed; /* make sure it stays put so we can see it! */

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

Try changing the animation-duration to 0.5s. That allows for two animation can be completed with the animation-delay math.

Scott noted in his original demo that also setting:

animation-iteration-count: 1;
animation-fill-mode: both;

Accounted for some “overshoot” weirdness and I can attest that I’ve seen it too, particularly on short viewports, so it’s worth setting these too.

Scott also set the scroll-related animation properties on the :root {} itself, meaning that it could control all the animations on the page at once. Here’s his demo that controls three animations simultaneously: