"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

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

Little progressively enhanced CSS border reveal button using mask... && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }show more

I love animating using CSS.

CSS Tip! ✨ Combine :has() and trig functions to... select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇show more

Responsive grid layout using HTML and CSS 🚀

Little skeumorphic button experiment using css box-shadow

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

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

Create this layout using nested css grids and media... queries 💪show more

Made this 404 error page just using CSS ✅... Code 👇show more

Create this responsive flex layout using just HTML and... CSS 🚀show more

messin' with css frosted + saturated borders using background-clip... + backdrop-filter 👨‍🍳show more

Dropdown using HTML and CSS 🔥 Code in the... comments below👇show more

Create sidebar using HTML and CSS 🚀 Code in... the comments 👨‍💻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

🎮 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

one way: clip-path: shape() in css single element, draw... outline, scoop corner no stitched-together pieces/mask gymnastics 🧙show more

if you’re dynamically masking a scroll container with css,... consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;show more