Issue #559

September 8, 2023

What is the View Transitions API and how to use it with meta frameworks

Mojtaba Seyedi explains how to create smooth and simple transitions between states and pages using View Transitions API.

Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS

Geoff Graham explores the Oklch color space and how to start using it in CSS.

🌟 Unleash The Power of the Top 3%!

Looking for top-tier talent to elevate your projects? Dive into Toptal’s exclusive network and discover the crème de la crème of freelancers in software, design, and more. Why settle when you can have the best? 🔍

Explore Toptal Now

CSS Weekly on YouTube

▶ CSS "display" is a multi-keyword property?!?

Learn how the multi-keyword syntax of CSS display property works and why you should start using it, along with an explanation of Block Formatting Context (BFC) and newer Flow and Flow-Root display values.

Watch video

Articles & Tutorials

Case Study: Rebuilding TechCrunch layout with modern CSS

Ahmad Shadeed shares a case study that demonstrates how modern CSS can help you create a complex layout.

View Transitions Break Incremental Rendering

Eric Portis outlines a problem View Transitions can cause to a partially-rendered page.

Let’s Make a Rubber Button With HTML, CSS and SVG

Tyler Sticka shows how to create a Rubber Button effect.

How layout position impacts three big web performance levers

Sia Karamalegos shares three common problems related to layout position: lazy loading images above the fold, asynchronous loading of CSS needed for elements above the fold, and not prioritizing the fetch of the Largest Contentful Paint (LCP) image.

Why Does Email Development Have to Suck?

Hristiyan Dodov outlines some challenges with email development.

The Smartest Use of Screentime Yet

Get out of mindless scrolling and into a world of knowledge and growth. With Brilliant, you can transform idle moments into opportunities for learning and career development.

Dive into their captivating lessons in math, data science, and CS, and watch as your understanding expands and your skills flourish. With thousands of bite-sized lessons available on any device, Brilliant fits seamlessly into your schedule, allowing you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide and get a 30-day free trial today.

Start your free trial today!

Tools

Better Select

Better Select is a minimal custom select, with the fallback option to the native select on mobile devices.

Check it out

Calendar.js

Calendar.js is a JavaScript drag & drop event calendar that is fully responsive and compatible with all modern browsers.

Check it out

Inspiration

Connected Grid Layout Animation

Manoela Ilic shares some creative ideas for simple on-scroll animations on “connected” grid layouts.

Get inspired

Until Next Week

Thank you so much for reading!

If you want to support this newsletter and my work, check out my other CSS-related projects:
• CSS Weekly YouTube Channel
• CSS Stickers

And if you still haven’t, check out my upcoming course Mastering Prettier & Stylelint. And use the coupon code SUBSCRIBER20 to get additional 20% off on the Masterclass package as a CSS Weekly subscriber.

Happy coding,
Zoran Jambor

Issue #558 Issue #560