@RT Manuel Matuzović
TIL that document.querySelectorAll() returns a static NodeList and Element.getElementByTagName() returns a live HTMLCollection.
Demo:
h/t @ChrisFerdinandi
https://codepen.io/matuzo/pen/PoWQeem?editors=1010
https://gomakethings.com/live-vs.-static-nodelists-and-htmlcollections-in-vanilla-js/
RT Mikael Ainalem
Using clip-path transitions to create a hamburger menu open effect. On @CodePen
https://codepen.io/ainalem/full/OJWQbor
https://twitter.com/mikaelainalem/status/1381302873527623680
RT Elad Shechter
🤨 The #CSS Fullscreen Features - Two features for the same thing?!
@CodePen Examples:
1. Media query (display-mode: fullscreen) -
2 The ':fullscreen' Pseudo Class -
What do you think? What is the point?
https://codepen.io/elad2412/pen/yLgvEKB
https://codepen.io/elad2412/pen/ZEBqLEp
RT Mustafa Enes
Challenge by @CodePen accepted. Snappy scrollable fruits with real-time, scroll-position-dependent effects:
https://codepen.io/pavlovsk/pen/ExZExYW
RT Arden
Wow, yesterday I finished @bruno_simon's #threejsJourney , and what a journey it has been! Here's the last scene, created in Blender and imported into threejs with baked textures. @CodePen link here:
https://codepen.io/aderaaij/full/BapYONL
It's week two of the microinteractions #CodePenChallenge!
Your challenge: take this list and make it interesting or fun to scroll through 📜
Thanks @pluralsight for sponsoring!
https://codepen.io/challenges/2021/april/2
RT George Francis
New CodePen!✨ — “A Generative SVG Noise Pattern Maker”
I love this style of pattern and wanted to add some to my in-progress personal site, so I built a little generative pen to create them.
Hopefully some folks find it useful! 🚀
https://codepen.io/georgedoescode/full/dyNVNjG
https://twitter.com/georgedoescode/status/1380187931768287234
RT Elad Shechter
🤓 Centering #CSS Grid which has a dynamic number of items in a row with a fixed size.
Using:
.grid-container{
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
}
@CodePen:
https://codepen.io/elad2412/pen/VwPMwVK
RT Ben Evans
All drawn in CSS for no apparent reason:
#OriginalContentArtist
https://codepen.io/ivorjetski
RT masahito art
Another JavaScript experiment - form alphabets with stars with your keyboard @CodePen
#javascript #star #codeart
https://codepen.io/Ma5a/pen/jOyaEBX
RT Pluralsight
We teamed up with @CodePen to give you a #CodePenChallenge you can jump into. Dig in here
http://plrsig.ht/AprilCodeChallenge
RT Amit Sheen
On-click 3D shatter effect, with pure CSS.
#CodePenChallenge
Full code @CodePen :
https://codepen.io/amit_sheen/full/PoWKgqe
RT Ryan Mulligan
3D button transitions for this week's Click Microinteraction #CodePenChallenge @CodePen
https://codepen.io/hexagoncircle/full/KKaXgJw
https://twitter.com/hexagoncircle/status/1379787836564586498
RT Coding Drag Queen Anna Lytical 🌈👩🏻💻👸🏻
100% pure css
@UrbanDecay x @CodePen x Anna Lytical
Code is just a tool for creation and you can learn so much using it in unintended ways. Hope you enjoy 💜
https://twitter.com/theannalytical/status/1379826285707460615
RT Adam Kuhn
went and built a lil intro for the @CodePen video podcast (vodcast?) using Zdog for the 3d letterforms capped into a gif for use as an SVG mask for the static (h/t SVGenius @cassiecodes) + SVG mask/path draw animations and the rest as they say is pure CSS
https://codepen.io/cobra_winfrey/full/MWJpYLX
https://twitter.com/cobra_winfrey/status/1379525997540864005
RT tiffany choong ⚡️
A wild CSS only Scorbunny appeared!
#codepen @CodePen //
http://codepen.io/tiffachoo/pen/vYgmQgJ
RT Jhey 🐻🛠
Launch Control Button 🚀
This week's @CodePen challenge is all about micro-interactions! What could you make?
OK. Maybe this one isn't so "micro" 😅 But, it was a fun SVG animation to make.
⚠️ Audio! ⚠️
⚒️ @greensock
💪
👉
https://codepen.io/challenges/2021/april/1
https://codepen.io/jh3y/pen/rNOqzbN
The April #CodePenChallenge starts today!
This month is all about microinteractions — those little moments where the best UI interactions are informative or fun. We're kicking it off with a click! ⬆️
Thanks @pluralsight for sponsoring!
https://codepen.io/challenges/2021/april/1
RT Anna the Scavenger
Stills from recent #threejs #codeart on @CodePen
Endless Creativity✨
↳ Animated version:
https://codepen.io/ScavengerFrontend/full/mdRrVVO
RT Sikriti Dakua
Menu/Link Hover Interaction
@CodePen 👉
using @greensock
http://cdpn.io/OJWNabR
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
