@RT Chris Heilmann [email protected]
👉🏼 „Chris' Corner: Clever CSS Ideas & Explanations - CodePen Blog”
🔗https://blog.codepen.io/2023/07/31/chris-corner-clever-css-ideas-explanations/
💬 Frosted Glass, Nested Rounded Corners, CSS Masking and circular text with CSS
RT T. Afif @ CSS Challenges
💡 CSS Tip!
A simple design for your checkbox with a nice animation on click.
✅ No extra element (only the <input> tag)
✅ No pseudo-elements
✅ One value to control the size
✅ Less than 15 CSS declarations
Demo: http://codepen.io/t_afif/full/jOQdQOx via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1687037904466362368
RT Jon Kantner
A #CSS and #SVG text logo animation where everything is outlined, shaded, and then reversed
https://codepen.io/jkantner/pen/qBQgoKq @CodePen
RT Mads Stoumann
Vacation Time — greetings from Notting Hill! https://codepen.io/stoumann/pen/LYXqWem via @CodePen
RT T. Afif @ CSS Challenges
What about a wavy underline instead! 〰️
Powered by CSS mask, gradients, CSS variables and @property
Demo: http://codepen.io/t_afif/full/eYQxdbG via @CodePen
/cc @KevinJPowell
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: I had to try it 👇 and it was, indeed, a fun experimentation!
✅ Minimal HTML
✅ CSS-only
✅ No magic numbers
✅ Works with any number of elements
Demo: http://codepen.io/t_afif/full/bGQOaEb via @CodePen
#CSS
</div> https://twitter.com/ChallengesCss/status/1686699470946205696
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
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
