The CSS Podcast

The CSS Podcast

Sep 16, 2020 52 min

025: Season 1 Wrap Up

In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.
Sep 09, 2020 18 min

024: Blend Modes

Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page. Links: mix-blend-mode → Isolation: Cascading Style Sheets →
Sep 02, 2020 26 min

023: Filters

In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. Links: Filter Effects Module L1 → Backdrop Filter → CSSGram → Photo filters → Contrast Swap → feColorMatrix → Shaders →
Aug 26, 2020 38 min

022: Animation

With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes. Links Animations L1 → Easing L1 → Scroll-Linked Animations → Cubic-Bezier → Debugging Animations → Rainbow Button → Complete Easing Functions → https://goo.g
Aug 19, 2020 30 min

021: Gradients

In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design. Links: Spec Level 3 → Spec Draft Level 4 → Lea’s Pattern Gallery → Lea’s Cicada Principle Article →
Aug 12, 2020 39 min

020: Functions

In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we’ll be doing a massive overview of all the CSS functions, to be later deep dived. Links CSS Tricks Guide to CSS Functions → CSS Variables → Functional Notations Spec → Cubic Bezier Generator → Billion Laughs Attack →
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 →
The CSS Podcast
Weekly podcast