CSS Masters retweeted
Little @CodePen demo: stacked avatars codepen.io/thebabydino/pen/o…
Pure #CSS and very little of it, just some flexbox magic. 🪄
CSS Masters retweeted
an item from my 2025 wishlist is being prototyped!
`flex-wrap: balance`
nerdy.dev/css-wishlist-2025
CSS Masters retweeted
ALT @mixin --box { aspect-ratio: 1; inline-size: 100px; block-size: 100px; } .box { @apply --box; }
CSS Masters retweeted
#CSS only carousels arrive in Chrome 135
⤷ nerdy.dev/css-carousel-in-ch…
CSS Masters retweeted
Positioning Text Around Elements With CSS Offset
css-tricks.com/positioning-t…
CSS Masters retweeted
Here's the Codepen link for you to check it out in Chrome 133+
codepen.io/una/pen/JoPZRrG
CSS Masters retweeted
attr() is getting an upgrade!
Starting in Chrome 133 (stable rollout happening this month), you'll be able to access attributes in CSS as typed values beyond strings.
Here's an example of where that's pretty cool. Given:
You can use data-rating as a numerical value with:
attr(data-rating type()
So in this demo, I'm using that value to show a fill percentage in the stars (as a background gradient with a mask). I'm also able to use this value as a string (which was possible before) to represent its content as a string in a pseudo element. Two for one!
CSS Masters retweeted
5 minutes with this text-box syntax and feature explorer is all you need to ramp up!
nerdy.dev/notebook/text-box.…
CSS Masters retweeted
#CSS text-box
a very exciting feature!
available in:
Chrome 133 & Safari 18.2
My post on Chrome Developers:
developer.chrome.com/blog/cs…
↪ nerdy.dev/text-box-trim
CSS Masters retweeted
Make a card, dialog, or overlay pop with an animated gradient box shadow type effect
try it on Codepen
codepen.io/argyleink/pen/abe…
⤷ nerdy.dev/animated-radial-gr…
CSS Masters retweeted
💡 CSS Tip!
Do you want to convert a length value to a unitless value? What if I tell you it's possible to remove the unit from any CSS value to get an integer! 🤯
⚠️ A hacky experimentation to use with caution ⚠️
@CodePen demo in the reply 👇
ALT Overview of the CSS code from the demo in the next tweet
CSS Masters retweeted
🆕 Mini Web Machine
Pop n' Lock
-
ALT show thumbnail image says The Dialog Machine - Mini Web Machines
CSS Masters retweeted
"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle
codepen.io/argyleink/pen/Rwd…
CSS Masters retweeted
A ball on a colorful grid ⚪️/⬜️
I can look at it for hours. 😵💫
Pure #CSS! (no scss, no pug, no loops, no inline vars)
Live demo and full code on @CodePen: codepen.io/amit_sheen/full/g…
CSS Masters retweeted
also, if you're looking to learn CSS scroll driven animation, definitely checkout my colleague @bramus's YouTube series youtube.com/watch?v=5noL_qFo…
CSS Masters retweeted
this is 100% doable with #CSS Scroll Driven Animations, you could totally make it progressively enhance too
i wrote for @codrops on SDA and we build a carousel at the end tympanus.net/codrops/2024/01…
you could easily modify the keyframes to rotate like Nitish shows here
CSS Masters retweeted
Nice little weekend project - Pure #CSS Pixar lamp. 💡
All of the axes movement is set using custom properties, so the motion can be easily animated with @property. 😎
Live demo and full code @codepen: codepen.io/amit_sheen/full/W…