@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: https://codepen.io/amit_sheen/full/jOXbLqj
RT Nicolas Jesenberger
Gooey effect made using SVG filters 📸
<div class="rsshub-quote">
Nicolas Jesenberger: Gooey Toggle Switch 💧
@CodePen: http://cdpn.io/xxmbvxL
</div>
https://twitter.com/njesenberger/status/1695085833978544214
RT Adam Argyle
premade *springy* easing #CSS variables,
courtesy of Open Props and linear() 🤓
transition:
transform 1s var(--ease-spring-5),
box-shadow 1s var(--ease-spring-5)
peep the pen 👇
https://codepen.io/argyleink/full/abPvZJo
RT Nicolas Jesenberger
Gooey Toggle Switch 💧
@CodePen: http://cdpn.io/xxmbvxL
RT Kevin Powell
I've just put out a new video! Power-up position absolute with this simple technique https://youtu.be/JdNG_PtuJXM
"Rainbowluminescence" by Steve Gardner
https://codepen.io/ste-vg/pen/qBQVGEG
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> https://twitter.com/jh3yy/status/1694442289047703873
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."
https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/
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: http://codepen.io/gambhirsharma/pen/RwEPjPK
https://twitter.com/gambhir_sharma/status/1694340531583602834
RT Maciek Fitzner
I made another #3d #css dice/cube - this time with rounded edges & faux shading (toggle between smooth & flat). Live #demo on @CodePen: https://codepen.io/MackFitz/pen/zYyGdLP
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).
https://codepen.io/thebabydino/pen/abPbPjR
Safari only.
Chrome 🪲 https://bugs.chromium.org/p/chromium/issues/detail?id=541698
Firefox 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1191043
RT Jon Kantner
A #CSS voxel preloader with a lighting effect
https://codepen.io/jkantner/pen/rNoVLox @CodePen
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: https://youtu.be/7Q7qlquojQk
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: http://codepen.io/t_afif/full/XWoJRLr via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1693935594760557019
> ... 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.
https://www.creativebloq.com/news/new-shape-optical-illustion
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! 👇
RT Amit Sheen
I love combining centuries old concepts with modern day #CSS to create great looking animations. 🤓
Here is a CSS only Phenakistoscope.
* Single div
* Single animation
Live demo @CodePen: https://codepen.io/amit_sheen/pen/gOZYBoo
RT Ana Tudor 🐯🖤🌻
#tinyCSStip
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 👇
RT Mads Stoumann
Venetian Blinds — using CSS Custom Properties with arrays of background-colors and colors thanks to @ChallengesCss https://codepen.io/stoumann/pen/GRPRXBJ via @CodePen
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
