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