CSS-Tricks Screencasts

Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid. We didn’t go from 0 to 100 here, but …

Stupid simple, right? It is! But it’s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I mean by a line anyway? We’ll mostly talk about a …

Jetpack can help automate your site’s social media. It’s a pretty small feature compared to all the huge stuff Jetpack can do, like improve your site’s search, back it up, and protect it. But it’s a …

Tara Z. Manicsic joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular — nay, the SSG for Angular, as Tara pointed out to me. I don’t know much Angular …

As amazing as Git is for handling your source code, you can certain git (lol) yourself into trouble. What if you make a change to a file and you want to get rid of the change? What if you just …

Andy Bell joins me to talk through his CSS methodology he calls CUBE CSS. That’s Composition, Utility, Block, and Exception.…

One of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways “through” the Shadow DOM, and one of them that is pretty cool and useful is using …

This is the last video in our little series on using Notion. We’ve covered how Notion is great for working on web development teams. But another thing that makes Notion great is that it’s useful for yourself too. …

Snook published an article titled “Overlapping Header with CSS Grid” where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the …

This is the second video in 3-video series on using Notion. In Part 1 we covered a lot of ground on what Notion is how it’s great for any team, and web development teams in particular. In this video, …

I’m a big fan of Notion, particularly for keeping teams in sync. I work on teams of developers, and I find it works particularly well for that. If I had to sum it up really quickly, I’d tell Notion …

Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips are paths” is one way to think about the difference…

Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips are paths” is one way to think about the difference, although it certainly gets confusing. In this video, we’ll look at how similar mask and its mask-* properties are really similar to the background and background-* properties. And they can be used together nicely, sinces a mask is a … Read article “#184: Playing with CSS Masks”

The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but …

The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but doing it that the easy way means losing the really nice alignment we got for free with outside list markers. We want it both ways! Let’s do that with our own custom counters, CSS grid (with subgrid), and some more … Read article “#185: Inside & Aligned Lists”