Sublime

depth stack slider - progress indicator - blur + gradient mask on underlying images - pointer, wheel and keyboard controls https://t.co/Qd8uO33Ae8

Slide to unlock - made with Tailwind CSS https://t.co/mSpOgpXVhN

landing page design tip: instead of designing section by section try to design viewport by viewport use around 720px as your height reduces the odds of content feeling disconnected and having to scroll up/down to see the full picture

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS https://t.co/ijeDFFlOcY

Almost ready to be served 🍳 Amazing what you can achieve with so little CSS ✨ https://t.co/GPS82WPKek

image stack to floating carousel https://t.co/uwKnlrApoj

CSS entry/exit transitions 2024 ⚡️ dialog { filter: blur(4px * (1-var(--op, 0)); opacity: var(--op, 0); transition:display 0.3s allow-discrete, opacity 0.3s, filter 0.3s; } @​starting-style { dialog[open] {--op:0;}} dialog[open] {--op:1;... See more

app banner - no layout shift - doesn't block render - corner radii change to 0 to reduce visual contrast - bezier curves for the notch https://t.co/k1OKKSZ8KT

trick to this CSS-only styled range slider is a scroll animation on the underlying [type=range] – animate a custom property from 0 to 100 – use that value to style visual elements – style the input so you get better hit spots covered in this week's "Craft of UI" 👇... See more