The CSS Podcast

The CSS Podcast

Aug 05, 2020 19 min

019: Z-Index and Stacking Context

In today’s episode, we’re talking about z-index and stacking context. This is a pretty in-depth topic, but it's something that we see all the time and it can definitely bite if you aren’t aware of what’s going on. Links: CSS Animations Level 1 → Scroll-linked Animations 1 → 15 thoughts on What's the Maximum Z-Index? → What No One Told You About Z-Index →
Jul 30, 2020 18 min

018: Focus

Today we discuss: focus! Focus is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we’ll be discussing all of those things in this episode! Links: User Action Pseudo-classes → HTML Standard → Keyboard control → Roving tabindex -- A11 →
Jul 22, 2020 21 min

017: Shadows

Today we’re talking about shadows! Box shadows, drop shadows, text shadows, & everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders. box-shadow spec → text-shadow spec → Sass pixel art → Any image to CSS → Easing Box Shadows → Codepen → 3D Text → https://g
Jul 15, 2020 24 min

016: Borders

Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the image repeats itself and what slice of the image you want to show. Links: CSS backgrounds and borders → CSS logical properties and values → Fancy border radius generator →
Jul 01, 2020 36 min

015: Pseudo Selectors

In this episode we break down functional and regular pseudo selectors, CSS’s special hook into encapsulated element states. We can’t control them, but we can leverage them to provide rich interactive feedback from our interfaces. Links: Selectors Level 4 → :focus-visible explainer → :blank naming → Pure CSS Games Post → Empty Demo with Custom Properties →
Jun 24, 2020 20 min

014: Pseudo Elements

::after and ::before? Do you know about ::first-letter, ::spelling-error, and ::backdrop? Dive into pseudo-elements & how to use these unique declarations that enable styling specific parts of some selected HTML. CSS Pseudo-Elements Module Level 4→ CSS Shadow Parts→ CSS Text Decoration M.L.3→ The ::cue pseudo-element→ CSS Scoping M.L.1→ Part & theme explainer→https://goo
Jun 17, 2020 24 min

013: Spacing

In this episode we do our best to cover the many ways to create space on the web. From techniques like HTML entities nbsp; to gap, we cover the clever, hacky and clean ways you can create spatial relationships on the web. Links CSS Logical Properties and Values Level 1 → HTML Entities → Everything You Should Know About Collapsing Margins → Adam’s video: flex gap and internationalization →
May 27, 2020 20 min

012: Logical Properties

The days of euro-centric spacing like `margin-top` are limited: instead, say hello to `margin-block-start` to define space that works within any linguistic context based on your layout needs.In this episode we shake the physical and lean into the logical as we break down CSS logical properties. Links: Flow-relative syntax for margin - like shorthands -
May 20, 2020 31 min

011: Grid

Tracks, gaps, areas and flow are hot topics in this full coverage episode on CSS grid. We don’t leave anything out, so you’re bound to pick up something new. We talk about functions like min, max, and minmax, and how to combine all of the powers of CSS Grid to create explicit and auto layouts. Reach for the right parts of grid at the right time. Links Grid Spec → 3 CSS Grid Features Una Loves → Grid to Flex →
May 13, 2020 24 min

010: Flexbox

In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis’, flex flow, wrapping, order, justification, alignment, and more! Links Flexbox Spec - Flow-flow with writing mode - Grid to Flex:
The CSS Podcast
Weekly podcast
Next episode Wednesday, August 12