@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
RT Amit Sheen
* SINGLE DIV STEPS *
While playing with 'fake' perspective in CSS, I built these steps with one div (plus a couple of pseudo elements) and some creative use of background-image.
Live demo on @CodePen: https://codepen.io/amit_sheen/full/KKrLvXJ
* Hover over the image to see the 3D effect.
RT Ana Tudor 🐯🖤🌻
#tinyCSStip Want to get a progressive grayscale()/ saturate() filter effect, from 0% to normal?
Blend with a gradient from *anything with saturation 0%* to transparent using the color blend mode!
https://codepen.io/thebabydino/pen/rNQbEEg
May also have a grayscale split https://twitter.com/anatudor/status/1351781587889889283
<div class="rsshub-quote">
Ana Tudor 🐯🖤🌻: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes.
background: url(cat) 50%/ cover,
linear-gradient(-45deg, transparent 50%, grey 0);
background-blend-mode: luminosity
Many variations possible.
</div> https://twitter.com/anatudor/status/1688955652519997444
Pepperoni Pizza in SVG with no assets, just patterns and filters! Clever.
https://www.youtube.com/shorts/DANXG6sIlqM
RT Mads Stoumann
Some <figure>s in a 1960's magazine layout: https://codepen.io/stoumann/pen/mdQgppx via @CodePen
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
RT T. Afif @ CSS Challenges
It's Celebration Time! 🎊🎉
𝟭𝟬.𝟬𝟬𝟬 𝗳𝗼𝗹𝗹𝗼𝘄𝗲𝗿𝘀: Thank you! 🥳
Demo: http://codepen.io/t_afif/full/rNQbagj via @CodePen
🎁 A surprise animation at the end of the demo is waiting for you. Click and enjoy!
(Best viewed on Chrome desktop)
#CSS
https://twitter.com/ChallengesCss/status/1688483032246697985
RT Yoav Kadosh
Pure CSS Solar Eclipse ☀️
Made with 18 layers of linear, radial & conic gradients. A "rotate" animation is applied to certain layers to move the rays.
@CodePen link - https://codepen.io/ykadosh/pen/GRwLKvV
RT T. Afif @ CSS Challenges
🎨 CSS Pattern!
Demo: http://codepen.io/t_afif/full/oNQVJzw via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1688133223476277248
"Gooey countdown svg" by Fabio Ottaviani
https://codepen.io/supah/pen/abVGjVq
RT T. Afif @ CSS Challenges
CSS Mask + Trigonometric functions + CSS variables + @property = A magic result! 🤩
✅ A fancy animation using only the <img> tag!
Demo: http://codepen.io/t_afif/full/XWyGWyJ via @CodePen
idea by @argyleink
#CSS
https://twitter.com/ChallengesCss/status/1687407874748633088
Why web components?
One reason: it's super fast and easy to use pre-built components that offer great functionality and are easy to style. Like Swiper!
https://codepen.io/chriscoyier/pen/QWJoWzY
RT Matthias Hurrle
Beneath the Frozen Veil
Deep under the unforgiving ice shield of the Antarctic mountain ridges, where few dared to venture, x-ray scanners unveiled enigmatic structures that seemed to have been hidden for eons. More on @CodePen 👇
"A Pure CSS 3D Maze!" by Ben Evans
https://codepen.io/ivorjetski/pen/poQpveN
RT Mads Stoumann
You could be a winner! 🤣 Lottery Number Generator https://codepen.io/stoumann/pen/xxQMMqQ via @CodePen
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
