Casa di Solare

Angus Emmerson

Tasca d'Almerita

👑 The Web Component Success Story

Jake Lazaroff discusses the potential benefits of web components for enhancing web development ecosystems and promoting interoperability among JavaScript frameworks, emphasizing their role in creating a more accessible and unified web experience.

📏 Going beyond pixels and (r)ems in CSS - Relative length units based on font

Brecht De Ruyte writes about various length units in CSS, including cap, ch, em, ex, ic, lh, and more, highlighting their uses and practical applications for web design, such as responsive grids and typography considerations.

💡 A highly configurable switch component using modern CSS techniques

Andy Bell shows how to create a highly configurable switch component using CSS, logical properties, custom properties, and container queries, demonstrating the potential of CSS for creating flexible components.

🛰 LGLTracer Version 3

This WebGPU ray tracing renderer has evolved with improved functions, making it easier to create scenes with high-quality effects.

📨 Mailready

Check if your domain meets the new requirements for email deliverability with this free tool by the folks of Engage.

⌨️ Big, beautiful, beefy focus states with :focus-visible

Dave Rupert writes about the benefits of using the :focus-visible pseudo-state in CSS to enhance keyboard navigation experiences for users by creating distinct focus states for keyboard interactions without interfering with click interactions.

🙋‍♀️ A Call for Consensus on HTML Semantics

Stephanie Eckles talks about how tricky HTML markup can be, especially when you're making blogs or dashboards. She says it's important to make things clear for people using the website and to make sure everyone can access it easily. But she also points out that web development is full of challenges, and there aren't always simple solutions.

🧞‍♀️ Field-sizing just works!

Learn about the cool new "field-sizing" CSS property, which automatically scales input and textarea elements to the size of their content, replacing JavaScript-based techniques previously used for the same purpose.

🌠 Masked Loader Animation using GSAP

A loader animation concept made by Uzo based on a design from Bob Torfs.

🎨 Introducing Bitspace – A new kind of playground for creative ideas

Emil Widlund introduces a new open-source creative environment called Bitspace, which offers tools for exploration, prototyping, and creative freedom, utilizing concepts like Circuits, Nodes, and Connections, and leveraging RxJS for computations.

✨ On-Scroll Animation Ideas for Sticky Sections (from our blog)

In our latest exploration, we prepared 15 demo variations on how sticky sections can be animated, focused on the way they exit they viewport.  

💙 Dear reader, as costs rise and sponsors diminish, maintaining Codrops has become a challenge. We believe in the power of community, and with your pocket change, you can keep us alive and thriving. Help us sustain Codrops for the future.🙏

Getting Started with Threlte: Animating a Spaceship in Three.js and Svelte - Part 1

When Optimisations Work, But for the Wrong Reasons

React Three Fiber Tutorial for Beginners || Three.js Website Example - Elegant Landing Page

Animation Spotlight

WATER BOTTLE №002 by Matthew Hall

CSS scroll-driven scroll-snapping animations

Giana made this lovely presentation on how to pull off CSS scroll-snapping animations.

Drawing Effect from kidsuper.world

Maxime Heckel redid an amazing drawing effect made by basement studio for the kidsuper.world website. Read more about it in his tweet.

Ribbons

Wen is experimenting with ways to render longer animate trails in his latest demo. You can find the code here.

Toggle Pill

Some cool little animations for checkboxes made by Alvaro Montoro.