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 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 → https://goo.gle/4aHY7zo
Quick intro to View Transitions (Google I/O 2023 video) → https://goo.gle/3ZieRLp
What's new in View Transitions? (Google I/O 2024 video) → https://goo.gle/3zeYNj3
Misconceptions about View Transitions → https://goo.gle/3Tpsu7O
Bramus's Demos:
Collection of various demos, both SPA and MPA → https://goo.gle/3B4edY8
Accordion → https://goo.gle/3B4egDi
Adam's Demos:
Grid gallery → https://goo.gle/4giz0XV
Always great grid → https://goo.gle/3MH68Lu
Flexbox visualizer → https://goo.gle/47kmJOB
Editable tabs → https://goo.gle/4ghNfMx
Dollar number input → https://goo.gle/4e0FsBf
Stateful morphing button → https://goo.gle/4ebBNR2
Drag and Drop → https://goo.gle/3XlP2Yn
Isotope recreation → https://goo.gle/4dVX5lN
Local development animated → https://goo.gle/3XHjm17
Una Kravets (co-host)
Twitter → https://goo.gle/452aBRb
YouTube → https://goo.gle/457oMnS
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC &
Designing in the Browser 🎬 → https://goo.gle/4e4YTcM
Adam Argyle (co-host)
Twitter → https://goo.gle/3yFnHYu
Instagram → https://goo.gle/3wUb6QJ
YouTube → https://goo.gle/4dZNKK7
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
CSSWG → https://goo.gle/4bFErxq
VisBug → https://goo.gle/4bDcVQZ
The CSS Podcast
#CSSpodcast