this is just HTML and CSS, no JS
line based picker system kind of a gallery
Derek Briggs on X: "Here’s a strategy I use for more natural looking shadows: Adjust your shadow stack sizes to account for a negative spread that’s 1/2 the amount of the Y. To make it even easier, I use a matching Y and Blur for each shadow layer and then set every layer to the same color/opacity. https://t.co/jrYWkr42Bh" / X
Laurids on Twitter / X
CSS effect cursor faint glow over button
Nanda Syahrasyad on X
It's a bit of a misconception that an SVG's viewbox has anything to do with its width. For the most part, the SVG's width is controlled by CSS and/or the width attribute *only*, while the viewbox is more akin the SVG's "camera":
Artur Bień on Twitter
Realistic glass backdrop 🤯In reality we see glass objects reflecting light even before they are placed directly between our eyes and the light source.CSS backdrops, however, blur only intersecting objects. But I've found a solution to that!Here's a demo on @linear website pic.twitter.com/2Lqp2GVAer— Artur Bień (@artur_bien) September 27, 2023
Dan Hollick on Twitter
jhey 🔨🐻✨ on Twitter
There's a CSS debug for ya! 🤙😅[debug] * { outline: 4px dashed hsl(320 100% 50%);} https://t.co/JK8DPOoB0k— jhey 🔨🐻✨ (@jh3yy) August 19, 2023
Sebastian Graz on Twitter
“Using border-image sprites for device borders can save you 20x in file size.
Huge bonus is that it also works with long shadows that would normally kill the browser if it was pure CSS.
One of my assets went from 628kb to 28kb (AVIF)☠️”
Dan Hollick 🇿🇦 on Twitter
depth effect using CSS blurs that progressively brings things "into focus" or un-blurs based on background proximity
Thomas Cullen on Twitter
“Some people have been asking how the top section for this page was built. It was a ton of fun to make so here's a breakdown of how it was made… 🧵”
Derek Briggs on Twitter
Here's some detail around how the new @trycampsite switch component was crafted and built. Will share some of the shadow/lighting detail as well as a little code used for the toggle animation: pic.twitter.com/Q1iLbo5PWe— Derek Briggs (@PixelJanitor) February 21, 2023
Dmitry Belyaev on Twitter
New typography structure for 2.0. Getting rid of auto-responsive styles in favor of more granular manual control of how they change at each viewport. While becoming more flexible - it also reduces the amount of style variables shipped in code ⌨️ pic.twitter.com/co43rsmWSi— Dmitry Belyaev (@blvdmitry) February 19, 2023
Vlad Moroz on Twitter
You can make any HTML/CSS layout automatically scale to container if you put it into an SVG element.Just discovered it when making this responsive, dark mode aware diagram. pic.twitter.com/NxfasuN6nl— Vlad Moroz (@vladyslavmoroz) January 28, 2023
matt rothenberg on Twitter
✨hacky ✨ CSS version featuring copious amounts of @tailwindcss !https://t.co/OWWnyXJtt9 pic.twitter.com/fQQYBdEb0u— matt rothenberg (@mattrothenberg) December 20, 2022
Emil Kowalski on Twitter
Toggle your theme using clip-path pic.twitter.com/WfH9V5nIIk— Emil Kowalski (@emilkowalski_) November 16, 2022
David Svezhintsev 🌸 on Twitter
Curious how I managed to animate it? Here is a timelapse of about 1 hour animation work in Rive!https://t.co/ynCHrOrJe3— David Svezhintsev 🌸 (@daveranan) November 15, 2022
Per Harald Borgen 🇺🇦 on Twitter
CSS Grid is amazing. Just by adding a single line of code, this image grid becomes fully responsive 🤯 pic.twitter.com/sIQUcHhved— Per Harald Borgen 🇺🇦 (@perborgen) October 14, 2022
Shu on Twitter
I like this idea a lot and after many years, finally brought it to life... CSS-only magnifier! The demo doesn’t have any JavaScript.Will share the code next week, but I believe some of you can already figure it out :D pic.twitter.com/rTs8aFj2uj— Shu (@shuding_) September 18, 2022
Steve Sewell on Twitter
Make super cool swipe-over sections like Apple in pure CSS!Try it in code: https://t.co/OUvhtQK5IPTry it in @builderio: https://t.co/5RMA37TdIr pic.twitter.com/lOiUdFeHx1— Steve Sewell (@Steve8708) June 25, 2022
HOVERSTAT.ES on Twitter
Smart use of a layered mask image with blur filter to create a dreamlike experience for this single-page lookbook. by @okokservices pic.twitter.com/HVCCFyl9vm— HOVERSTAT.ES (@hoverstates) June 16, 2022