RT Manuel Matuzović
Time passes so fast that I'm constantly missing CSS features that are already safe to use.
Demo:
caniuse:
https://codepen.io/matuzo/pen/GRrGWRz
https://caniuse.com/intrinsic-width
RT Hugo Priet
Movie App by @shakuro on @CodePen.
GSAP Flip Plugin & ScrollTrigger.
Pen :
@greensock #CodePenChallenge #javascript
https://codepen.io/smoothdev35/pen/rNMxPwQ
RT Ricardo Oliva Alonso
🎹 Alesis v25 🎹
Live @CodePen:
#html #css #javascript #illustration #animation #3D #cssart #piano #music
https://codepen.io/ricardoolivaalonso/full/RwKyeEg
RT Chris Gannon
Audio Waveform (using GSAP's tween ratio and parseEase) @CodePen
https://codepen.io/chrisgannon/details/jOyzYyw
RT Elissavet Triant.
For this week's @CodePen #codepenchallenge "Scrolling" I came up with this gallery scroll micro-interaction:
See the prompt here:
#frontenddev #HTML #CSS3 #javascript #IntersectionObserverAPI
https://codepen.io/elisavetTriant/pen/OJWvOyr
https://codepen.io/challenges/2021/april/2
RT ➝
CSG1 [Twilight]
-
#SVG Generative Series
-
https://codepen.io/johnwai_/full/zYNprGX
RT Toshiya Marukubo
#116 in 2021 / CodePen Challenge
Scrolling🖱️
Link👇
https://codepen.io/toshiya-marukubo/pen/JjEvbrd
https://twitter.com/toshiyamarukubo/status/1382347505946431489
RT Brian Hinton 🐧
I collected all of my @tailwindcss magazine explorations into a single @CodePen collection. Go fork them, and explore yourself!
https://codepen.io/collection/nvwEMB
https://twitter.com/MrBrianHinton/status/1382295070154625025
RT Tanner Dolby
3D Shipping Truck 📦 #CSS
@CodePen:
https://codepen.io/tannerdolby/pen/RwKybqL
RT Colleen Lohr 🤓
Hey y'all! Just finished my entry for the CodePen 'Scroll' Challenge. This project uses a bit of jQuery and Lodash JavaScript, and nth-child to achieve the animated scrolling effect on a stack of elements.
#webdev #design #css #codepenchallenge
RT Amit Sheen
Another successful #LiveCSS session.
This time we built pure CSS fireworks to celebrate Independence Day.
Full code @CodePen :
The full video (in Hebrew):
https://codepen.io/amit_sheen/pen/mdRxboK
https://youtu.be/T0ku-Jj4sdQ
RT Monica.dev
Here's a glimpse at my SVG creation process 🐻🌊:
https://aboutmonica.com/blog/my-svg-creation-process
https://twitter.com/indigitalcolor/status/1381943273917456385
RT Jhey 🐻🛠 (Exploring Opportunities ✨)
"Infinite Scrolling Random Fruits 🍍"
1st entry for the @CodePen x @pluralsight challenges 😎
Uses the "Meta GSAP" technique I've been banging on about lately 😅 Article is awaiting scheduling! 🙌
New positions on load 🔥
👉
http://codepen.io/jh3y/pen/poRLYyo
RT 𖤐 𝐋𝐔𝐊𝐘 𝐕𝐉 ( LukyVj ) 🐺
Really been pushing that experiment a lot lately 😅
But I do find it really cool 😎 and thanks to @CodePen everyone can export the clips right in codepen!
Show me your best creations! 😏
https://lucasbonomi.com/
RT Louis Hoebregts
From a #JavaScript simplex noise demo on @CodePen (Fig. 1) to a @figmadesign plugin (Fig. 2) and finally an #SVG with fancy filters (Fig. 3) 🥳
#1
#2
https://codepen.io/Mamboleoo/pen/bLWrbx
https://codepen.io/Mamboleoo/pen/wvgmLGN
RT Adam Argyle
quantity responsive scroll-snap 🙂
changes slide width and background color based on number of slides w/ quantity queries.
[video shows style changing after delete and duplicate]
CSS technique by @heydonworks, learn more
demo pen
https://alistapart.com/article/quantity-queries-for-css/
https://codepen.io/argyleink/pen/wvgmMXe
RT Håvard
For this week's @CodePen challenge I created this horizontal slideshow with images that overlap on scroll⭐
No JS of course😉
https://codepen.io/havardob/full/rNjdVjB
RT Jhey 🐻🛠 (Exploring Opportunities ✨)
Pure CSS 3D Responsive Minecraft Toggle 🕹️
Toggle between "Steve" and the undead 😅
Powered by CSS variables 💪
Change sizing, colors, etc.
Tap to toggle! 👇
Here it is @argyleink 😉 Had to put a little spin on it though!
👉
http://codepen.io/jh3y/pen/oNBEBXd
RT Pluralsight
The Week 2 #CodePenChallenge is here! This one is scrolling. @JeremyCMorgan made this list more interesting with a creative scroll. Watch to the end.
https://codepen.io/challenges/2021/april/
Build, test, and discover front-end code 👩🏽💻