The CSS Podcast

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.

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 → https://goo.gle/3m5L9mP Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX

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 → https://goo.gle/34SPJ1D Backdrop Filter → https://goo.gle/3hJTMRz CSSGram → https://goo.gle/2EPDOad Photo filters → https://goo.gle/31PhaYi Contrast Swap → https://goo.gle/2G9LpRh feColorMatrix → https://goo.gle/34UKw9u Shaders → https://goo.gle/32PJ2uR

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 → https://goo.gle/2DhV0V2 Easing L1 → https://goo.gle/3kWoWap Scroll-Linked Animations → https://goo.gle/39VQV4N Cubic-Bezier → https://goo.gle/2Q5xj5i Debugging Animations → https://goo.gle/3ayI2yD Rainbow Button → https://goo.gle/3214e0t Complete Easing Functions → https://goo.g

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 → https://goo.gle/3h8cRN7 Spec Draft Level 4 → https://goo.gle/3iPmDUE Lea’s Pattern Gallery → https://goo.gle/3j4XEwX Lea’s Cicada Principle Article → https://goo.gle/2FyeWnr

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 → https://goo.gle/2XRb7Ah CSS Variables → https://goo.gle/2XRb2fX Functional Notations Spec → https://goo.gle/3gJwavQ Cubic Bezier Generator → https://goo.gle/30LiDhG Billion Laughs Attack → https://goo.gle/2XUxjtg

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 → https://goo.gle/2DhV0V2 Scroll-linked Animations 1 → https://goo.gle/39VQV4N 15 thoughts on What's the Maximum Z-Index? → https://goo.gle/31ipKxh What No One Told You About Z-Index → https://goo.gle/3fqTLjl

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 → https://goo.gle/3jNSHcL HTML Standard → https://goo.gle/3g7FzNr Keyboard control → https://goo.gle/2X1rNEE Roving tabindex -- A11 → https://goo.gle/3jOZenQ

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 → https://goo.gle/32JVdL4 text-shadow spec → https://goo.gle/2ZMdiGo Sass pixel art → https://goo.gle/3hsjQjp Any image to CSS → https://goo.gle/2WKnm0L Easing Box Shadows → https://goo.gle/2BjU6qh Codepen → https://goo.gle/2ZLUDL2 3D Text → https://g

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 → https://goo.gle/3hbosdZ CSS logical properties and values → https://goo.gle/308szAl Fancy border radius generator → https://goo.gle/3fH3SBT