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

💡 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

Another (cool) demo where I am using the same... technique. Demo: via CodePen.IO The border will smoothly stop (always) at the same position on hover. #codepenchallengeshow more

I made a version of this using only modern... CSS. 👀show more

Tailwind CSS Tip ✨ You can create a pure... css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔show more

In case you missed it, I wrote about the... basics CSS Anchor Positioning. 🔗show 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

table of contents marker w/ modern css 🧑‍🍳 .toc... { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙show more

Future CSS Tip! 🤞 You could create an image... zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇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

CSS view transitions + anchor positioning now let you... easily build smooth SPA-like navigation on a good old static website!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

CSS Tip! ⚡️ You could use CSS trig functions... to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇show more

Oh yeah and Samsung now has cool features like... taking photos using gestures on the #GalaxyRing this also works for snoozing alarms. Only with a Galaxy Phone and Watch. #GalaxyUnpackedshow more

made only using css. no js listener used. took... me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.show more

What we can do with modern CSS is impressive!... 🤩 A cool demo is in progress. Stay tuned! 👀show more

Did you know? ✨ You can create an animated... toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔show more

I've created a simple website that allows you to... play with squircles using modern CSS `corner-shape`show more

Return to an iconic FPS with Crysis 3 Remastered,... optimized for modern systems. Humble Choice for May features this and more great games!show more

Got carried away with this interactive module for breaking... down the CSS mask-image propertyshow more

created this animated vestaboard, made using Next.js and Tailwind CSS