091: Season 5 Wrap-up
The CSS Podcast
Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS! Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
090: Scroll-driven animations
The CSS Podcast
In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers. Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools Extension link → Video Course direct link: Adam's Demos: scroll() the hue wheel → CSS scroll() feature time warp → view() long bento list → view() scrolly telling → view() iOS-like app...
info_outline
089: View transitions
The CSS Podcast
In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos. Resources: Developer Documentation → Quick intro to View Transitions (Google I/O 2023 video) → What's new in View Transitions? (Google I/O 2024 video) → Misconceptions about View Transitions → Bramus's Demos: Collection of various demos, both SPA and...
info_outline
088: State queries
The CSS Podcast
In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky. Resources: :stuck, :snapped, :on-screen, etc → state queries syntax → explainer → Intent To Prototype → Scroll Snap Events → Una Kravets (co-host) → → Making the web more colorful ✨🎨 Web DevRel Unicorn face Host of Tools Today...
info_outline
087: Anchor positioning
The CSS Podcast
In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → CSS anchor positioning → → Una's Anchor Tool → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
086: Nesting 2024+
The CSS Podcast
In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → Episode 65 → CSS Nesting Update → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
085: Linear easing function fun
The CSS Podcast
In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → linear() generator → Complex animation curves in CSS with linear() → Open Props premade spring and bounce variables → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
084: Text Wrap
The CSS Podcast
In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code. Resources: text-wrap on MDN → soft breaks → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
083: :has() tips and tricks
The CSS Podcast
In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS. Resources: Ep 61 → Piccali → Ahmad Shadeed → The Looper → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
082: What's new in color & color functions
The CSS Podcast
In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → Apple Annie CSS Color Modules and Changes, Part I → Lea verou article on RCS for contrast → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outlineIn this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers.
Resources:
Bramus's Demos:
All mentioned Demos + Tools + Video Course + DevTools Extension link → https://goo.gle/3Uw31up
Video Course direct link: https://goo.gle/learn-scroll-driven-animations
Adam's Demos:
scroll() the hue wheel → https://goo.gle/4emb3NO
CSS scroll() feature time warp → https://goo.gle/4exH3yv
view() long bento list → https://goo.gle/4gtcCLx
view() scrolly telling → https://goo.gle/3TAq2vA
view() iOS-like app switcher → https://goo.gle/4etvCI6
view() variable font animation → https://goo.gle/4e8eJmd
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘