@The Particles #CodePenChallenge continues!
This week, we’re creating cursor effects with particles ✨
https://codepen.io/challenges/2023/july/2 https://t.co/kdFcFiFYBX
RT Mads Stoumann
For this week's #CodepenChallenge, I've used a bunch of techniques to recreate a page from Hirayama Fireworks catalog, 1883 https://codepen.io/stoumann/pen/MWzvYeX via @CodePen https://t.co/wz8Fne2Aqv
RT Chris Gannon
The robots are back and they won't let you switch them off! 🤖🎚️
AI Slider @CodePen https://codepen.io/chrisgannon/pen/LYXLqpx @greensock #animation #javascript #ai https://twitter.com/ChrisGannon/status/1676966946284396554/photo/1
RT Rach Smith 🌈
code fireworks are:
- safe (don't start fires)
- silent (won't upset your dog)
- eco friendly
my attempt for this week's @CodePen challenge
https://codepen.io/rachsmith/pen/jOQLoaJ https://t.co/W4Tz1OBbex
https://twitter.com/rachsmithtweets/status/1676914739711184896
RT Steve Gardner
I added more scenes and particle effects to my Letter Hop @CodePen. Pretty pleased with how this one turned out! It's easy to change the letters in the code to spell out whatever you like, perhaps even emojis will work 🤔😜
https://codepen.io/ste-vg/full/GRwmqxq https://t.co/RlL7KCGcut
RT AdirCode 🔥
Here's me live coding a blooming leaf on @CodePen, it's sped up, of course, it was much slower IRL 😁 https://t.co/V171Qbxwmf
RT Amit Sheen
This week's #CodePenChallenge is all about Fireworks. So I did some, with #CSS, and don't let anybody tell you that you can't do particle animations in CSS. 🤣
Live demo on @CodePen: https://codepen.io/amit_sheen/full/jOQwzga https://t.co/4B9T6Kyy3X
RT LukyVj - A$AP Luky
Re @ChallengesCss @CodePen Yess!! More UIs!!
RT Manan Tank
Wrote a little function to smoothly transition height of a container automatically when elements inside them change using MutationObserver API
This is really useful for Modals
Made a fun little @CodePen to try it out
https://codepen.io/MananTank/full/mdQwyWW
RT Wakana Y.K.
It's dance floor themed 🕺🪩✨
No images are used. All CSS animations.
PARTY TIME
Demo : https://codepen.io/wakana-k/pen/WNYONXp
@CodePen #codepen #animation https://t.co/ZxCandz6vd
The July #CodePenChallenge starts now!
This month, we're playing with particles
Let's get this particle party started with fireworks 🎆
https://codepen.io/challenges/2023/july/1 https://t.co/HNBU2HW9Hd
RT Taha Shashtari
It's a great feeling to see your idea come to life. 😍
I have built a tool that I previously needed. This tool helps me visualize and copy the colors that lie between two specified colors.
@CodePen link: https://codepen.io/tahazsh/pen/zYMwEXp
#CodePenChallenge https://t.co/5ePxFm4mhP
RT Mads Stoumann
Pleased about this Color Picker. NO JAVASCRIPT, but a mask directly on `type=color` and datalists with variants. Click on the t-shirts to pick your favourite color-combo 😊 #CodepenChallenge https://codepen.io/stoumann/pen/qBQrgmo via @CodePen https://t.co/GAUh9dusMo
RT Brandon McConnell
Decided to take that animated gradient button with the cut-out text from @learnframer and implement the same pattern in pure HTML and CSS on @CodePen over lunch
Supports dark mode out of the box. Check it out:
https://codepen.io/brandonmcconnell/pen/LYXWrQJ https://twitter.com/learnframer/status/1674055197956481029 https://t.co/oghyGezFt4
<div class="rsshub-quote">
Framer University: 🌈 Glowy gradient button in @Framer.
Drop a "☝️" in the comments if you wanna see a tutorial. https://t.co/QAkUB8uICK
</div> https://twitter.com/branmcconnell/status/1674167480879833088
RT Mike-麥-Mai-v1.618
I used the Best Design Tool to create my Web Accessibility Manual in accessible, semantic #HTML. 🎊
Some learnings:
☑️You can add alt text to CSS pseudo elements
☑️You can draw grid with CSS gradient
☑️Custom list needs role attribute
Now on my domain:
https://mikemai.net/a11y-manual
https://twitter.com/mikemai2awesome/status/1674488333873840129
RT Amit Sheen
Had a busy couple of days, packed with interest, fun and great people, so I had to do something calm... 😊
It's a 🎡, but with #CSS.
Live demo on @CodePen: https://codepen.io/amit_sheen/full/bGQgGOx https://t.co/nrLlbU7iel
RT Jon Kantner
Engraved Theme Toggle
https://codepen.io/jkantner/pen/MWzpeEq @CodePen #CSS https://t.co/RsKI5lqSxK
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a reveal animation to your image with a simple and nice hover effect
✅ No extra element (only the <img> tag)
✅ No pseudo-element
✅ 10 CSS declarations
Demo: http://codepen.io/t_afif/full/PoxpvJr via @CodePen
#CSS https://t.co/PawdalpfEV
https://twitter.com/ChallengesCss/status/1674390713293758464
RT Kass 🦈
🌟A calculator I made using HTML & CSS earlier this year. My favorite of the year so far 😍
Code here: https://codepen.io/kassandrasanch/pen/MWzgJYZ https://t.co/3FiqpxCtlb
https://twitter.com/KassandraSanch/status/1674067586324070402
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
