@RT Bence
Inspired by the upholstery of the train cars in Hungary (MÁV). See photos in comment 🚂👀
Train Seat 💺 (512 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/GRBWEJR
RT Mark Boots
I love CSS Trigonometry functions. Build this easy adjustable 3d carousel in CSS where the items join up nicely thanks to the law of sines.
For now only in Firefox and Safari, Chrome will follow soon (experimental atm)
#css #webdev #codepen @CodePen
https://codepen.io/MarkBoots/pen/yLqgdLz
The "New CSS" #CodePenChallenge continues!
This week, let's dig into container queries 💻
Thanks @koredotai for sponsoring!
https://codepen.io/challenges/2023/january/2
RT Jon Kantner
Undo/Redo With :active Clock Animation
https://codepen.io/jkantner/pen/qByRyaw
RT Callum Macrae
Happy friday, happy codepen day 😁
Heavily inspired by something I saw at 180 The Strand last year (can't remember the artist though 😔), it's built using Three.js and was super fun to work on!
https://codepen.io/callumacrae/full/MWBbeJz
💕 The Most Hearted of 2022!
1️⃣ "App Menu With Lock Screen" by @Hyperplexed
https://codepen.io/Hyperplexed/pen/vYpXNJd
💕 The Most Hearted of 2022!
2️⃣ "CSS Marquee Logo Wall" by @hexagoncircle
https://codepen.io/hexagoncircle/pen/wvmjomb
💕 The Most Hearted of 2022!
3️⃣ "Animated Continuous Sections with GSAP Observer" by Brian Cross and Team @greensock
https://codepen.io/GreenSock/pen/XWzRraJ
💕 The Most Hearted of 2022!
4️⃣ "Animated Star Rating" by @jonkantner
https://codepen.io/jkantner/pen/BarvVNa
💕 The Most Hearted of 2022!
5️⃣ "Infinite Scroll Animation" by @yoavikadosh
https://codepen.io/ykadosh/pen/KKezJzz
💕 The Most Hearted of 2022!
6️⃣ "Nova - Points (color, animation, rotation.order)" by prisoner849
https://codepen.io/prisoner849/pen/RwyzrVj
💕 The Most Hearted of 2022!
7️⃣ "ThreeJS Toys - Neon Cursor" by @soju22
https://codepen.io/soju22/pen/wvyBorP
💕 The Most Hearted of 2022!
8️⃣ "Sidebar Interaction" by @aybukeceylan
https://codepen.io/aybukeceylan/pen/wvpBmrq
💕 The Most Hearted of 2022!
9️⃣ "Pokemon Cards Holo effect v2" by @simeydotme
https://codepen.io/simeydotme/pen/abYWJdX
💕 The Most Hearted of 2022!
🔟 "Animated BottomBar Experiment (CSS Transitions only)" by @chrisbautista
https://codepen.io/chrisbautista/pen/NWXjqLN
RT jhey 🔨🐻✨
This week's @CodePen challenge is all about CSS :has() 😎
But you'll also notice this demo has a pure CSS timer 👀 That's using CSS "@ property" which is currently only in Chromium but there's intent for webkit 🙌
p.s Cheat code for this game is "cmd + opt + C" (DevTools 😅)
jhey 🔨🐻✨: CSS Tip! ✨
Use CSS :has() on the :root to check for a condition on the page 🧐
For example, this pure CSS Minesweeper game 🤯
:root:has([id*="bomb"]:checked) body {
--show-fail: 1;
}
If a bomb gets :checked, game over! 😭
@CodePen link below! 👇
RT Greg Robleto
Here's a @CodePen Challenge demo for the CSS :has() feature, formatting cards with images differently:
It also shows that @channingtatum is my 7th cousin 3x removed of husband of 3rd cousin 2x removed
Yes, I actually did the genealogical digging 😀
https://codepen.io/robleto/pres/KKBggRM
RT Stranger in the Q
Genuary 4 - Intersections
https://codepen.io/strangerintheq/full/vYaXVwL
https://twitter.com/stranger_intheq/status/1610749604340842502
RT AdirCode 🔥
Functional content cards UI I’ve been playing with lately. All icons are from Tabler Icons (thanks to @csaba_kissi) and of course, here’s the @CodePen:
https://codepen.io/Adir-SL/pen/MWBeEoX
The Top 100 Pens of 2022 on CodePen is out!
Listen to Marie and Chris chat about it:
https://codepen.io/2022/popular/pens/
https://blog.codepen.io/2023/01/04/395
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
