@RT jhey 🔨🐻✨
A question in the replies about the CSS container query types and it reminded me of these demos over on @CodePen 😅
These were for an article about container queries and creating the Peter Griffin blinds 👀
Resize container to style the beard 😂
Grab the @css article below 👇
<div class="rsshub-quote">
jhey 🔨🐻✨: CSS Tip! ✨
You can make your component styles portable with container queries 😎
Change a card layout based on size 🔥
Remove button text when it's small 🤏
.card {container-type: inline-size;}
@ container (min-width: 50ch) {.info { grid-column: 2; }}
@CodePen link below 👇
</div>
https://twitter.com/jh3yy/status/1686455402202808320
RT Jordan Dey
Did my "Easy Flexible Gallery Grid" capture your heart?❤️
Well, there's more magic in store!✨
I've just sprinkled some extra enchantment by adding an new feature: now you can effortlessly add and remove images with smooth transitions!🖼️🔥
@CodePen : https://codepen.io/DeyJordan/pen/ExOGRoJ
"Rainy Night in the Forest" by William Staudenmeier
https://codepen.io/WilliamStaudenmeier/pen/RwqoWBx
"Grainy & Gradients text" by LukyVJ
https://codepen.io/LukyVj/pen/poOjqBv
RT Carl 💥 Creative Coding Club
99.95% of Websites do NOT need a Ferris Wheel.
I use lessons like this to show the power of combining GSAP w/ JavaScript basics like using functions to
💥generate a dynamic number elements
💥dynamically resize, position and rotate them
Demos and story of the Ferris Wheel below
"Randomized Circle Groups With Background Lines" (like Zelda!) by Paul Hebert
Demo: https://codepen.io/phebert/details/xxQrPqJ
Writeup: https://cloudfour.com/thinks/coding-randomized-zelda-patterns/
RT Ana Tudor 🐯🖤🌻
Two pure #CSS loading animations.
Check them out on @CodePen:
One https://codepen.io/thebabydino/pen/vYJQzbo
Two https://codepen.io/thebabydino/pen/mdMapbj
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy reveal animation to your image on hover
✅ No extra element (only the <img> tag)
✅ Powered by Trigonometric functions and @property
✅ Optimized with CSS variables
Demo: http://codepen.io/t_afif/full/YzRdWXQ via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1685955625254088704
RT jhey 🔨🐻✨
CSS Tip! ✨
Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥
CSS only, no JS! 🤯
.b:has(+ .b:hover),
.b:hover + .b {
flex: calc(0.2 + (sin(30deg) * 1.5));
translate: 0 calc(sin(30deg) * -75%);
}
@CodePen link below! 👇
RT Mads Stoumann
Oxygen. Rutherford Model https://codepen.io/stoumann/pen/RwqqWEE via @CodePen
RT Dr Abstract
Oooo! A @CodePen #CodePenChallenge for physics particles. Here we use the ZIM Emitter with an interactive sink that attracts the particles!
Try it out and fork it at https://codepen.io/zimjs/pen/poQxMLd - we love CodePen!
#JavaScript #Canvas #Particles #Emitter
#ZIMjs
RT Adam Argyle
I can't stop seeing #CSS View Transitions!
here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲
try it https://codepen.io/argyleink/pen/jOQKdeW
RT Jon Kantner
A toggle switch with some neon lighting
https://codepen.io/jkantner/pen/MWzqMrp @CodePen #CSS #SVG
RT Ksenia Kondrashova
Minimal wave animation on HTML5 Canvas - only 2kb (!) of vanilla JS code
All we have here is a linear interpolation from one random sine wave to the next one. Check out the code and feel free to ask questions!
Live demo & source code: https://codepen.io/ksenia-k/pen/PoxdXMJ
Hosted on @CodePen
RT Wakana Y.K.
Tonight, the bunny is in the spotlight on stage, responding to the cheers of the crowd🐰🪩✨
Particle Spotlight
Demo:https://codepen.io/wakana-k/pen/eYQjReV
@CodePen #codepen #threejs
RT Bence
Inspiration comes from Jupiter of course 🙂
Gas Giant 🪐 (560 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/jOQvYaz
RT Amit Sheen
New video! with @KevinJPowell, and as a nod to this month's #CodePenChallenge, we talked about particle animations, and also about animating the timing function, SASS loops, nice uses of random, and more.
Would love to get your comments and remarks. 😊
https://youtu.be/9dEIg2xOphE
RT Nicolas Jesenberger
Scratch card made with canvas and SVG filter 🎁
Demo on @CodePen: https://codepen.io/nicolasjesenberger/full/jOQGgVB
It's the final week of the Particles challenge!
This week, let's experiment with particle physics ⚛️
https://codepen.io/challenges/2023/july/4
RT T. Afif @ CSS Challenges
🎨 CSS Pattern!
Demo: http://codepen.io/t_afif/full/poQZPJM via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1682706981008572416
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
