GiandomenicoRiceputi's front-end solution for the QR code component coding challenge on Frontend Mentor

✅ Sign up for my newsletter: https://kevinpowell.co/newsletter ✅ The issue where they picked the name: https://github.com/w3c/csswg-drafts/issues/12022 ✅ The original issue, debating the syntax: https://github.com/w3c/csswg-drafts/issues/11243 #css ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/) 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help support my channel 👨🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑💻 My editor: VS Code - https://code.visualstudio.com/ 🌈 My theme: One Dark Pro Var Night 🔤 My font: Cascadia Code --- I'm on some other places on the internet too! If you'd like a behind the scenes and...

Learn how to use the new range syntax for CSS style queries and the if() function.

A button that lets users smoothly scroll back to the top of the page and displays a visual progress indicator of how much content has been scrolled. Ma...

✅ Part one of this series: https://youtu.be/WP5CC5yawfs ✅ Code from this video: https://codepen.io/kevinpowell/pen/QwbYwXv??editors=1100 ✅ Style Query support table:…

A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the selected element(s). For example, the pseudo-class :hover can be used t…

This project is about building an infinite-scroll masonry gallery using React, TypeScript, and the Unsplash API.

Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

Grid is a powerful, flexible tool that brings complex layouts to life.

We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.

How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions.

A simple trick to control the border-radius based on the screen/container size

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.

(This meetup is in Dutch!/Deze bijeenkomst is Nederlandstalig!) Na de vakantie beginnen we weer vol enthousiast aan de toegankelijkheid. We zijn op deze avond te gast bij

— The personal website of Sara Soueidan, inclusive Web UI engineer

To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them. Link to: The anatomy of a scroll driven animation We don’t need…

The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated …

YouTube video by Alvaro Montoro

Last week I created a firework effect with CSS. It is relatively simple (it only requires one HTML element per firework) and customizable (it uses CSS custom properties to customize colors, sizes, pos...

YouTube video by Alvaro Montoro

We can now do calculations based on the intrinsic size of an element

If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.

Earlier this week, I explored a solution to center an image and caption by making the figure take on the width of the image even when the caption was longer than the image. I wanted the caption to…

I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated versi...

Explore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect…

How to get the right transform animation.

A new way to easily create hexagon shapes using corner-shape

10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.

flex-wrap doesn't only control the wrapping of items but also affects the alignment

YouTube video by Optimistic Web

YouTube video by Schalk Neethling

Responsive design has always required media queries, calc(), and dynamic units like vw and vh. But now there's a new function that promises to simplify everything: view(). This intelligent function…

YouTube video by Schalk Neethling

A workshop on resilient CSS layouts

Discover 40+ CSS hover effects, from holographic cards to liquid buttons, all complete with live CodePen demos and code!

YouTube video by Syntax

My 10 tips for making your website and social media more accessible, whether you're a blogger, photographer, writer, designer, or developer.