Full Book

Chapter 1 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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 12 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 13 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 14 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 15 Scroll Animation

There are some scroll animations that are possible in CSS without any JavaScript at all. Just look at the chapter on the Scroll Indicator, which is clearly CSS magic. But we can do a lot of scroll animation work directly in CSS with just one little bit of information provided by JavaScript: how far the page has scrolled.
To access this content, you must purchase MVP Supporter, or log in if you are a member.