RT Amit Sheen
Seven Boxes 🧊
Just a little Friday afternoon playfulness, and a nice little exercise in synchronizing animations.
Live demo and full code on @CodePen: codepen.io/amit_sheen/full/jOX

:sys_twitter: twitter.com/amit_sheen/status/

RT Nicolas Jesenberger
Gooey effect made using SVG filters 📸
<div class="rsshub-quote">
Nicolas Jesenberger: Gooey Toggle Switch 💧
@CodePen: cdpn.io/xxmbvxL
</div>
:sys_twitter: twitter.com/njesenberger/statu

RT Adam Argyle
premade *springy* easing variables,
courtesy of Open Props and linear() 🤓
transition:
transform 1s var(--ease-spring-5),
box-shadow 1s var(--ease-spring-5)
peep the pen 👇
codepen.io/argyleink/full/abPv

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

RT Kevin Powell
I've just put out a new video! Power-up position absolute with this simple technique youtu.be/JdNG_PtuJXM

:sys_twitter: twitter.com/KevinJPowell/statu

RT jhey 🔨🐻✨
CSS Tip! ✨
You can create icon sprite animations using the steps() animation-timing function 🤙
You could use this to create little icon button animations, etc. 😎
But how do you do it? Like this 👇
button img {
object-fit: cover;
object-position: 0 0;
}
The image is a…
<div class="rsshub-quote">
Andreas Storm: Love this little CSS steps trick for animations
</div>
:sys_twitter: twitter.com/jh3yy/status/16944

RT Cory LaViska
"Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use CSS Custom Properties, color-mix(), and OKLCH to ensure that tints and shades are perceptually uniform."
abeautifulsite.net/posts/bette

:sys_twitter: twitter.com/claviska/status/16

RT Gambhir ⚡️
Congratulations, @isro on the successful landing of Chandrayaan-3 on the Moon. 🚀 -->🌕
It's a very proud moment for us. 🥹🇮🇳
While watching the livestream I made a little CSS animation. Hope you like it. 😉
link: codepen.io/gambhirsharma/pen/R

:sys_twitter: twitter.com/gambhir_sharma/sta

RT Maciek Fitzner
I made another dice/cube - this time with rounded edges & faux shading (toggle between smooth & flat). Live on @CodePen: codepen.io/MackFitz/pen/zYyGdL

:sys_twitter: twitter.com/FitzMack/status/16

RT Ana Tudor 🐯🖤🌻
A @CodePen demo testing:
```
background: filter(var(--url), var(--filter))
```
... for almost all CSS filters (save for drop-shadow, for which nothing happens).
codepen.io/thebabydino/pen/abP
Safari only.
Chrome 🪲 bugs.chromium.org/p/chromium/i
Firefox 🪲 bugzilla.mozilla.org/show_bug.

:sys_twitter: twitter.com/anatudor/status/16

RT Kevin Powell
Have you used color-mix() in CSS yet? It's supported by all the big browsers, and is super easy to use!
Here's a quick example, and if you want a deep dive into it, here is the full video: youtu.be/7Q7qlquojQk

:sys_twitter: twitter.com/KevinJPowell/statu

RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a nice frame around your image with a cool hover effect
✅ No extra element (only the <img> tag)
✅ No pseudo-elements
✅ Only 4 gradients
✅ Optimized with CSS variables
Demo: codepen.io/t_afif/full/XWoJRLr via @CodePen

:sys_twitter: twitter.com/ChallengesCss/stat

> ... mathematicians go and discover the existence of a new shape. That's right a new shape. The new 13-sided two-dimensional shape has been called the 'Hat' and could open up all manner of new design and graphic design challenges and ideas.
creativebloq.com/news/new-shap

:sys_twitter: twitter.com/CodePen/status/169

RT jhey 🔨🐻✨
Future CSS Tip! 🤞
You could create an image zoom/crop using the CSS object-view-box property 🔍
img {
object-fit: cover;
object-view-box: inset(
var(--top)
var(--right)
var(--bottom)
var(--left)
);
}
@CodePen link below! 👇

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

RT Amit Sheen
I love combining centuries old concepts with modern day to create great looking animations. 🤓
Here is a CSS only Phenakistoscope.
* Single div
* Single animation
Live demo @CodePen: codepen.io/amit_sheen/pen/gOZY

:sys_twitter: twitter.com/amit_sheen/status/

RT Ana Tudor 🐯🖤🌻

How varying the clip-path inset from the right element edge can help with a left to right reveal effect
✨ when this inset is 100%, then all gets cut off
✨ when this inset is 0%, then nothing gets cut off
Interactive illustration + 🆒 pure CSS on scroll use case 👇

:sys_twitter: twitter.com/anatudor/status/16

RT Mads Stoumann
Venetian Blinds — using CSS Custom Properties with arrays of background-colors and colors thanks to @ChallengesCss codepen.io/stoumann/pen/GRPRXB via @CodePen

:sys_twitter: twitter.com/madsstoumann/statu

Show older
小森林

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