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 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 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
RT Matthias Hurrle
Riveting Refractions 🔉
@CodePen below 👇 https://t.co/xHlFwEVwgT
RT Ksenia Kondrashova
Can you guess what this little pleasing thing is?
Just a TorusKnotGeometry(1, 0.4, 200, 50, 2, 1) with MeshNormalMaterial() spinning around the axis with OrbitControls. Linear rotation only!
Live demo & source code: https://codepen.io/ksenia-k/pen/poQerxo
Made with @threejs
Hosted on @CodePen https://t.co/0CLWzaBUFv
RT Mads Stoumann
Chromesthesia is such an interesting phenomena, where colors are mapped to musical notes. I did a playable color/sound picker for #CodepenChallenge https://codepen.io/stoumann/pen/MWzpmzE via @CodePen https://t.co/aI9bCabji7
RT Adam Argyle @ Figma's Config
Re Container query inception by taking those smart buttons and putting them into different spots in a design and watch them self adjust!
Responsive Button Demo
https://codepen.io/una/pen/GRwZNrv https://t.co/8oQTSux6m0
RT Bence
Terrain map generation with SVG under half of a kilobyte 🤏
Terrain Map 🧭 (499 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/WNYRYRd https://t.co/dkb33mRtFH
RT T. Afif @ CSS Challenges
🎨 CSS Tip!
Do you want to define an array of colors using only CSS? Yes, it's possible! It's limited to only background coloration but can be useful.
Easy navigation using an index like any programming language 😎
Demo: http://codepen.io/t_afif/pen/KKrNYyp via @CodePen
#CSS https://t.co/5unsow7DCF
https://twitter.com/ChallengesCss/status/1673277381614751744
"Keep CSS Weird" by Adam Argyle
https://codepen.io/argyleink/pen/KKGOpMZ https://t.co/sks4i2lYju
RT Jordan Dey
Breaking the habit of last-minute submissions for the #CodePenChallenge 😅
I'm thrilled to present my latest work to the 'Bubble UI' project. Introducing two new pickers!
@CodePen: https://codepen.io/DeyJordan/pen/poQvgaz
#webdev #UI #design #CodePen #html #css #frontend #100DaysOfCode #dev https://t.co/EB4A1LdtxB
RT David Aerne
Played around with poline on @CodePen the other night: https://codepen.io/meodai/pen/WNYxBay still not a 100% happy with the output, but I am getting there. #generative #color https://t.co/uh72OpG0NI
RT Rob Stinson
Latest @CodePen fun - inspired by a recent trip to Athens.
https://codepen.io/robstinson/pen/GRwrXJQ https://t.co/ITYE6KD6rQ
Build, test, and discover front-end code 👩🏽💻