Modern CSS in Real Life
Chris Coyier looks at five new CSS things that really matter to real-world development. (And I’ve also already covered Logical Properties and Cascade Layers on my YouTube channel.)
Issue #552
Animated Pride Flags
Joshua Comeau shares a handful of animation tricks by demonstrating how to build an animated wavy pride flag.
From Our Sponsor
Flex Layout: faster and easier responsive design based on CSS web standards
Penpot Flex layout is a seamless responsive design layout based on CSS flexbox web standards. A mind-blowing design feature for coders!
Get instant pixel-perfect code with the first and only open-source design layout system based on CSS web standards.
Developers and designers save time!
CSS Weekly on YouTube
▶ Chrome DevTools Tips – Styles Pane & Elements Panel
Become more efficient when working with CSS and HTML in Chrome Developer Tools, from copying values in the Styles pane efficiently, navigating the Elements panel to using the command palette, working with colors, and identifying potential CSS improvements.
▶ "Do Not Disturb" in Visual Studio Code
A quick VS Code tip where I’ll show you how to disable annoying notifications that might randomly pop up precisely when you don’t want them to.
Promoted Link
Easiest way to share visual feedback
Beep allows you to leave comments directly on the site and share them with your teammates, it is 4x faster than sharing screenshots or screen recordings. It is free to use and works on any site.
Inspiration
100% 3D CSS + HTML Render (+ Basic JS Controls)
Jane Ori created an absolutely stunning 3d illustration using CSS.