GIFs

Twitter thread

![woman throws an apple and hits a fleeing boy in the head, caption says “CSS”](https://lynnandtonic.com/assets/images/gifs/fob-css.gif)

![a soda bottle is dispensed from the top row of a vending machine and dislodges two stuck other bottles on the way down, caption says “CSS”](https://lynnandtonic.com/assets/images/gifs/css-soda.gif)

![a 3x3 stack of blocks on wheels rolls down a little obstacle course where a sequence of cutout tunnels knock bricks away until just one remains, caption says “CSS”](https://lynnandtonic.com/assets/images/gifs/css-blocks.gif)

![a man flips off a pier into the sand followed closely by another man who flips  and lands on the first man’s back pushing his face into the sand, caption says “CSS”](https://lynnandtonic.com/assets/images/gifs/css-jump.gif)

![four green dice sit in a row on a table and a kid gathers them with the swoop of a plastic cup, he then lifts the cup revealing the four dice stacked vertically, caption says `flex-direction: column;`](https://lynnandtonic.com/assets/images/gifs/flex-direction-column.gif)

![white sheet of fabric moves to the right underneath various rollers that each add more and more color and detail, caption says “CSS”](https://lynnandtonic.com/assets/images/gifs/css-printed-fabric-sm.gif)

![red berries cascade through a mechanical sorting machine where little arms extend and knock away any berries that are green, caption says `:not(.green)`](https://lynnandtonic.com/assets/images/gifs/not-green.gif)

![mechanical arms lower a cover of plastic over a big stack of boxes, caption says `<div class="wrapper">`](https://lynnandtonic.com/assets/images/gifs/wrapper.gif)

![man grabs the edges of a square sheet of glass and lifts, breaking the corners off into a perfect circle, caption says `border-radius: 50%`](https://lynnandtonic.com/assets/images/gifs/border-radius.gif)

![man shuffles a tray of circular cookies and with a twist of the tray, all the cookies arrange in a nice evenly spaced pattern, caption says `justify-content: space-evenly;`](https://lynnandtonic.com/assets/images/gifs/css-space-evenly.gif)

![a golf club swings at a ball, misses, and hits only the flexible tee while the ball doesn’t move an inch, caption says `position: fixed;`](https://lynnandtonic.com/assets/images/gifs/position-fixed.gif)

![man bangs his fist against a walnut to try and crack it but pushes it through the desk forming a hole, caption says `z-index: -1;`](https://lynnandtonic.com/assets/images/gifs/z-index.gif)

![a young boy kicks a soccer ball toward a goal where the goalie is not paying attention, an adult labeled `!important` pushes the goalie down to the ground to block the ball](https://lynnandtonic.com/assets/images/gifs/bang-important.gif)

![a remote control changes a wall of windows from opaque to see-through and back again, the caption changes from `opacity: 1;` to `opacity: 0;` along with it](https://lynnandtonic.com/assets/images/gifs/opacity.gif)

![a dog’s disembodied head runs through a field with ears flapping, caption says `body { visibility: hidden; }`](https://lynnandtonic.com/assets/images/gifs/css-body-visibility.gif)

![two men sort fruit by sending them down a metal slide contraption that allows the fruit to fall into separate bins depending on their size, caption says “media queries”](https://lynnandtonic.com/assets/images/gifs/media-queries2.gif)

![caption says `:only-child { float: left; }`, man hits a golf ball toward a giant Jenga set on a table, it hits a block alone in its row sending it to the left offscreen and the tower falls nicely to fill the empty space](https://lynnandtonic.com/assets/images/gifs/css-only-child.gif)

![man wearing a blue bucket on his head jumps down from the roof of a car, the car owner chases him and knocks the blue bucket off his head to reveal a smaller turquoise bucket underneath, caption says “the cascade”](https://lynnandtonic.com/assets/images/gifs/bucket-the-cascade.gif)

![man bowls a ball down a lane toward two split pins, the ball knocks down both pins and sends one of them to knock down a single pin in the next lane, caption says “adjacent sibling combinator”](https://lynnandtonic.com/assets/images/gifs/css-adjacent-sibling-combinator.gif)

![caption says `display: grid;`, man grabs a block from a tower of horizontally and vertically balanced wood blocks and they all fall nicely into a single row, the caption updates to `display: flex;`](https://lynnandtonic.com/assets/images/gifs/grid-to-flex.gif)

![group of restaurant workers evenly place plates around the edge of a circular lazy susan, caption says `border-style: dotted;`](https://lynnandtonic.com/assets/images/gifs/css-border-style-dotted.gif)

![caption says `grid-column: 2; grid-row: 2;` man walks and throws a basketball behind his back where it bounces and lands in the 2x2 empty spot in a 4x4 rack of basketballs](https://lynnandtonic.com/assets/images/gifs/basketball-grid.gif)

![man swings at a baseball on a tee toward a blue balloon, he misses and overswings but hits a second baseball behind him that hits and pops a pink balloon, caption says “CSS”](https://lynnandtonic.com/assets/images/gifs/balloons-css.gif)

![a handful of colorful drinking straws, fingers grab one and stretch it out tall and out of frame, caption says `align-self: stretch;`](https://lynnandtonic.com/assets/images/gifs/align-self-stretch2.gif)

![a CSS declaration says `:last-child { }` with a blinking cursor. a line of brown geese walk by followed by a single white goose. the declaration gets filled in `color: white;`](https://lynnandtonic.com/assets/images/gifs/geese-last-child.gif)

![Janet from the Good Place happily accepts a piece of paper in her mouth from Eleanor, caption says `git stash`](https://lynnandtonic.com/assets/images/gifs/git-stash.gif)