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

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

CSS custom props and scroll animation for staggered effects... 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}show more

Fine. Real-life CSS lesson 🧑‍🍳🍕 .topping { translate: calc(var(--x,... 0) * 1cqi) calc(var(--y, 0) * 1cqi); transition: translate 0.2s; } [id=slide]:checked ~ .scene .topping { --x: 100; } cc David Eastshow more

soon you won't need inline custom properties to create... staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }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

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

one trick behind this demo 👇🎞️ .images { translate:... 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙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

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

🎮 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! 🤙 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

It took 40 minutes and 0 tears to create... this toggle 😛 Just CSS and HTML. Link to CodePen in comments 👇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

Future CSS Tip! 🔮 Create that cool gallery effect... with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇show more

I made the Apple iOS and macOS Liquid Glass... effect using CSS and SVG filters and it's available on GitHub #WWDC25 Link below 👇show more

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

Nice opportunity for transitioning CSS grid columns with :has()... && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }show more