Loading video...
Video Failed to Load
Future CSS Tip! ๐ฎ You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS โก๏ธ" Watch the debug below ๐ CodePen.IO link below! ๐
149,809 views โข 2 years ago โขvia X (Twitter)
11 Comments

Here's that @CodePen link! ๐ Remember, you'll need to be in Chrome Canary to see this in action ๐ค Was reminded of this demo after @chriscoyier showed the Vercel charge lines in a Spark edition. Slowly uploading my CSS Day demos ๐

@CodePen Dude where do you get these ideas? I need an infusion of your imagination

@CodePen Jus' keep on playing and riffing on things I've built or put together and take it from there I guess ๐ It definitely ebbs and flows but I keep a backlog of ideas and notes if ever I jus' wanna make something random

@CodePen This is some mind blowing stuff that's coming. It's crazy what we can do now and days compared to 10 years ago.

@CodePen I feel lucky because I don't know those times ๐ I came in a little later and started playing with animations and 3D transforms as my introduction to CSS

@CodePen Great tip! These new features are amazing ๐

@CodePen Looking forward to them being more widely available as I'm sure people will come up with some really cool uses for them ๐ฏ๐

@CodePen Did you make the above animation?

@CodePen I did! With a little HTML and some CSS โจ

@CodePen Awesome tip. Thanks a lot and keep up

@CodePen Do my best! ๐
