Show newer

RT A dumb gargoyle
fun use case for this new `lh` line-height unit:
gradient text effects that perfectly fit each line
try it in Canary with the experiments on
(or watch this video)
the codepen also has an `em` version fallback,
which is imperfect
Intent To Ship: Blink: Intent to Ship: CSS 'lh' Length Unit
groups.google.com/a/chromium.o

:sys_twitter: twitter.com/argyleink/status/1

RT Adam Kuhn
no. 11: 'burger'
this flying burger will melt yr lappy b/c I've animated background-positions & box-shadows. probably don't do that.
codepen.io/cobra_winfrey/pen/J

:sys_twitter: twitter.com/cobra_winfrey/stat

RT Ryan Mulligan
The @CodePen demo from the article visualizes how this CSS grid layout responds as the viewport expands and collapses 👀
Ryan Mulligan: Fresh off the press! 🎉
This article dives into my site's recent layout update and again reveals why CSS grid continues to sit at the very top of Time magazine's most influential CSS tools year after year*
*Time magazine doesn't do this but they should
ryanmulligan.dev/blog/layout-b

:sys_twitter: twitter.com/hexagoncircle/stat

RT T. Afif @ CSS Challenges
💡 CSS Tip!
Use the :has() selector and style your container based on its number of elements (direct children)
Demo:
⚠️ It doesn't count text nodes. Only tags!

codepen.io/t_afif/pen/ZEomRYP

:sys_twitter: twitter.com/ChallengesCss/stat

RT GreenSock
⚡️ Most of the time, the best way to approach a ScrollTriggered animation is by leaving out ScrollTrigger until the end.
Get the animation right first, and then hook it up to scroll.
Sounds a bit upside down, but it works!
@cassiecodes will show you what we mean...

:sys_twitter: twitter.com/greensock/status/1

RT Adam Kuhn
no. 10: 'game'
no I didn't forget about divtober, just a lil behind is all. here's the best atari game ever made, fresh from the new mexico landfill
codepen.io/cobra_winfrey/pen/L

:sys_twitter: twitter.com/cobra_winfrey/stat

RT Greg Robleto
Grills on!
Day 11 of is "burger"
Learned you can't use a mixin for multiple radial gradients in the same background, so did a lot with variable calcs to make those burger patties.
🏷️
codepen.io/robleto/pres/JjvmLm

:sys_twitter: twitter.com/robleto/status/157

RT ilithya 🎃
Also, replay sessions from season 2 of @iamelizasj & I jamming alone, & w/ amazing guests doing shaders like @anushkatr (patterns, perspective, architecture) and @sableRaph (movement, layers, blend modes) are up in our YouTube channel 🔥
youtube.com/c/curiouslyminded/

:sys_twitter: twitter.com/ilithya_rocks/stat

RT T. Afif @ CSS Challenges
💡 CSS Tip!
Turn your best images into a fancy carousel 🤩
✅ Minimal HTML (<img>s inside a container)
✅ No duplicated images
✅ Works with any number of images
✅ Optimized with Sass
Demo:

codepen.io/t_afif/full/PoedrGY

:sys_twitter: twitter.com/ChallengesCss/stat

RT 👻 jheyQuery v6.6.6 🔨🎃✨
Re Here's that @CodePen link! 🚀
The performance of CSS :has() is pretty incredible. There's another demo I'll share where it does some pretty "extra" stuff and it handles it like a champ 💪
codepen.io/jh3y/pen/JjvapBM

:sys_twitter: twitter.com/jh3yy/status/15781

RT Greg Robleto
Day 7 of is "wonder"
I was trying for the Library of Alexandria, one of the Seven Wonders, but I see now I made the lighthouse of Alexandria here, and I'm realizing they may not be the same place.🤷‍♂️
Code on @CodePen

codepen.io/robleto/pres/YzLjYv

:sys_twitter: twitter.com/robleto/status/157

Show older
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。