The CSS Podcast

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, and 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://goo.gle/2ZNO8ar 

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 

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 → https://goo.gle/2ZiJLmt  a:link vs. a styling demo → https://goo.gle/2NGwWgd  Hacking Visited for Una’s Blog → https://goo.gle/3eIo0TC  :focus-within from Next Generation Web Styling → https://goo.gle/3gaXSRE  :focus-visible explainer → https://goo.gle/2VslHMA  Una’s Pure CSS Whackamole → https://goo.gle/2VxfhvX  Una’s Pure CSS Tick Tack Toe → https://goo.gle/2ZzTCob  Pure CSS Games Post → https://goo.gle/2VslTvi  Empty Demo with Custom Properties → https://goo.gle/31tUlJS  :blank naming → https://goo.gle/2Vukm81 

::after and ::before? Pssh, do you know about ::first-letter, ::spelling-error, and ::backdrop? In this episode, we dive into the world of pseudo-elements and discuss how to use these unique declarations that enable styling specific parts of some selected HTML.  Links CSS Pseudo-Elements Module Level 4 → https://goo.gle/2BxRB3q  CSS Shadow Parts → https://goo.gle/2NqjYmM  CSS Text Decoration Module Level 3 → https://goo.gle/2zXWYsd  The ::cue pseudo-element → https://goo.gle/2Z0E6kF  CSS Scoping Module Level 1 → https://goo.gle/3hXj9jt  Part and theme explainer → https://goo.gle/2YqsJn2 

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 → https://goo.gle/3gw7FTp  HTML Entities → https://goo.gle/36Soqnd  Everything You Should Know About Collapsing Margins → https://goo.gle/2MwOuLr  Adam’s video: flex gap and internationalization → https://goo.gle/3gIuB1w

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: https://goo.gle/3gw7FTp  Flow-relative syntax for margin - like shorthands - https://goo.gle/2ZLoS4W