💡 CSS Tip! Two circles, one arrow, and CSS... magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.show more

💡CSS Tip! Create a tooltip that follows an anchor... with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!show more

A fun CSS-only experimentation using modern features (anchor positioning,... @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IOshow more

Tailwind CSS Tip ✨ You can create some cool... looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔show more

CSS shape() is now Baseline Newly Available → The... shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().show more

💡 CSS Tip! Create a Sticky Header that "sticks"!... A fancy effect powered by Scroll-Driven Animations and shape().show more

💡 CSS Tip! Do you know that One-Time password... field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.show more

I and Jason are currently working on implementing the... CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.show more

Pretty amazing that we can now implement swipeable Tabs... with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉show more

✨ Introducing Magic UI 🪄 A UI library of... animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.show more

A little sneak peek into one of many animations... done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.show more

An awesome CSS trick is to use :hover on... the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻show more

A list (with code) of cool framer-motion and Tailwind... CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointershow more

How I build with Claude Fable 5 1. CSS... position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️show more

CSS Tip! 🤙 These buttons from Michaël are ace... 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇show more

Design Engineering Tip Consider letting textareas grow with the... content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }show more

extra detail: animate a CSS custom property from 0... to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);show more

Prompt : A realistic cinematic scene begins in a... vast open field under a warm golden sky during late afternoon. A man dressed in a dark suit stands in the foreground, holding a modern recurve bow. His posture is steady and focused, breath controlled, eyes locked on a distant archery target placed far on the horizon. The environment feels quiet and expansive, with subtle wind moving the grass and soft sunlight creating long shadows. As he releases the string, the arrow launches forward with a sharp snap. The camera immediately accelerates and locks onto the arrow mid flight. The camera tracks directly behind and slightly beside the arrow, maintaining perfect alignment as it cuts through the air. Motion blur surrounds the background while the arrow remains sharp and centered. The sound of rushing wind intensifies as the arrow travels straight and true. The target grows rapidly larger. In the final seconds, the camera closes in tightly as the arrow strikes the bull’s eye dead center. End on an extreme close up of the arrow embedded in the red center, vibrating slightly, with crisp impact sound and dramatic silence.show more

Introducing NextUI v2.0! 🎉 Now with Tailwind CSS integration,... new components, enhanced customizability, & more. Dive into the features in our latest blog post → ** As always, we would love to hear your thoughts and feedback ❤️show more

Chrome 146 is stable 🚀 We’re shipping features that... move more logic out of your JavaScript and into the browser → ✨ Scroll-triggered animations (declarative CSS!) 🛡️ The Sanitizer API for XSS-free apps 🧩 Scoped custom element registriesshow more