💡 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

🎮 New CSS Game! What about a CSS game... that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩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

💡 CSS Tip! Get the scroll progress of the... page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇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

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

Who said range sliders need to be straight and... boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)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