@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
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
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
RT Mads Stoumann
Cube Color Picker — my entry for this week's challenge, using Material Design colors. https://codepen.io/stoumann/pen/MWzJQPQ via @CodePen https://t.co/6uCDhl0Zl0
RT Ksenia Kondrashova
GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯
Live demo & source code: https://codepen.io/ksenia-k/full/NWEbLEq
Made with @threejs
Hosted on @CodePen https://t.co/nM90VYmMV2
RT Mads Stoumann
Filter Compare Slider — anything from cool to scary horror-effects! https://codepen.io/stoumann/pen/qBQqqqg via @CodePen https://t.co/NraP0zY4jw
It's the final week of the "Choice UI" #CodePenChallenge!
This week, let's get into pickers: color pickers, date pickers, file pickers, and more 🗓
https://codepen.io/challenges/2023/june/4 https://t.co/MRH56OdVVw
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
