Popovers, Anchor Positioning, Container Queries and more: How we use new CSS features in production

Description

Summary In this conversation, Nils discusses various innovative web animation techniques and CSS advancements that enhance user experience and design aesthetics. He explores the concept of skeuomorphism, the application of container queries for responsive design, and the use of the popover API to simplify interactions. The discussion also covers view transitions and advanced animation techniques, emphasizing the importance of modern web technologies in creating seamless and engaging user experiences. Chapters 00:00 New CSS Techniques Overview 02:30 Creating Circular Layouts with CSS 11:46 Innovative Blog Post Previews using Container Queries 18:25 Animated envelope using CSS Clip-Path 24:15 Using CSS View Transitions to animate filtering 29:40 Leveraging the Popover API for Enhanced Interactions ----- 📲 Keep in touch with Dinghy: 🔗 Subscribe to our YouTube: https://www.youtube.com/@dinghystudio 🔗 Follow us on LinkedIn: https://www.linkedin.com/company/dinghystudio/ 🔗 Read our blog: https://www.dinghy.studio/blog/ About the author --- Hi, I'm Nils, Co-Founder and Head of Interaction Design at Dinghy. With over 10 years of experience in designing and building websites, I'm passionate about creating great digital experiences. At Dinghy, we believe that exceptional UX comes from the synergy of branding, content strategy, design, and development, all working together seamlessly. On this channel, I show you how to create outstanding user experiences for your customers through hands-on, easy-to-follow how-tos in wireframing, UI design, stakeholder management, usability testing, HTML, CSS, and frontend development. Keywords --- web animation, CSS techniques, skeuomorphism, responsive design, view transitions, popover API, container queries, web development