custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

You might’ve seen this bug before where the hover state keeps flickering. The fix is to separate the trigger from the effect. Listen for hovers on the parent, but animate a child element instead. This ensures that the hover area stays consistent.

People are debating the masonry layout, and I'm creating strange layouts. A Pyramidal Grid of Hexagon Shapes! 👀 https://t.co/Thw9PfCtrA A fully responsive implementation powered by modern CSS and no media queries.

messin' with text using CSS + SVG 🤌

https://t.co/eG31oFBAFC

Yesterday a quasi-judicial body in Italy fined @Cloudflare $17 million for failing to go along with their scheme to censor the Internet. The scheme, which even the EU has called concerning, required us within a mere 30 minutes of notification to fully censor from the Internet any

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 🤙

Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element. nav > ol > li:not(:last-child)::after { content: " / "; color: lightgray; padding: 0 0.5em; } The `:not(:last-child)` ensures no trailing separator after the final item. #StylishHTML

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake; background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)

📝 New CSS Article! Learn how I made that responsive list of overlapping images using modern CSS. https://t.co/yG7gbCJLNH A perfect use case for the new sibling-index() and sibling-count() functions

RT @jh3yy: 5 min subtle css border pulse effect w/ :active + offset opacity transition on a pseudoelement 🧑‍🍳 button::after { border: 1p…

Custom property powered responsive scroll animations with CSS 🔥 .card { animation: morph; animation-timeline: --scroll; } .card--one { --x: -35vw; --r: -10deg; } .card--two { --x: 35vw; } @​keyframes morph { 0% { translate: var(--x) var(--y); rotate: var(--r); } }

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

💡 CSS Tip! How many selectors do you know for the HTML element? Only two, right? There are more! It's time to discover the hidden selectors. https://t.co/LNUrEqET31 Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss another cool selector?

Needed to add magnifier effect to a screenshot, so I built this tool with @v0 in 20 minutes: https://t.co/E7CfFcJqwS Chat: https://t.co/md81fX0RPD Repo: https://t.co/ovApgeDyW7

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

@brfearing it's available for the very very smol price of @CodePen hearts ❤️😅 https://t.co/LqXvC1RWDl

glow with care 👨‍🍳 stack css drop-shadow() with increasing blur and saturation + brighten the text color one shadow ≠ glow

One of my favourite little details in the new COLLINS website is this responsive border-radius. --margin: calc((100% - var(--max-width)) / 2); border-radius: clamp(1rem, calc(1.5rem - var(--margin)), 1.5rem); https://t.co/mokwcgE2eM

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇