@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
RT Ryan Mulligan
Finally had a moment to mess with CSS scroll-driven animations and they are such a thrill. Currently, this @CodePen demo only works in latest Chrome and Edge: https://codepen.io/hexagoncircle/full/PoxMPzM
https://twitter.com/hexagoncircle/status/1690798244803284992
RT Amit Sheen
I love that we can now use trig functions in #CSS to create intricate 3D shapes and control them at runtime.😀
Here is an example of a Stellated Octahedron.
Live demo on @CodePen: https://codepen.io/amit_sheen/pen/GRwbGwP
RT Ana Tudor 🐯🖤🌻
#tinyCSStip Want to make an element start animating (for ex rotating) on hover, pause when unhovered, then restart animating when hovered again? All while applying other style changes on hover?
It's possible with pure CSS & very little code!
@CodePen demo https://codepen.io/thebabydino/pen/yLQdMqw
New week, new #CodePenChallenge!
Let's make some photo filters 📸
https://codepen.io/challenges/2023/august/2
RT T. Afif @ CSS Challenges
Something for this week #CodePenChallenge
Demo: http://codepen.io/t_afif/full/poQmvOM via @CodePen
#CSS
<div class="rsshub-quote">
CodePen.IO: The August #CodePenChallenge starts now!
This month is all about photos 📸
Let's kick it off with a deep dive into figures
https://codepen.io/challenges/2023/august/1
</div> https://twitter.com/ChallengesCss/status/1689027496593727488
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
