z-index in CSS explained 🫣

This one CSS property will fix your z-index headache.... In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️show more

CSS explained in 15 seconds

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

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

💡CSS techniques: "The Backlight" Using a blur filter you... can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works: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

Use CSS custom properties and the sin() trigonometric function... to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }show more

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。

🎮 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

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

How to create a customizable 'flipped' border-radius in CSS ↓

Pałką teleskopową do gościa z mieczem 🫣

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

Quick demo of this CSS-driven configuration coming in Tailwind... CSS v4 — creating a new `font-comic` utility by just creating a new CSS variable under our new `@​theme` directive. No JS configuration file, all the same theme customization flexibility 🤩show more