@💕 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
RT masuwa | web designer
Three.jsで audiovisualize
@CodePen
#threejs #creativecoding #webgl #audiovisualize
https://codepen.io/ma_suwa/full/MWBjVWP
RT Wakana Y. K.
Torus in Torus
Demo:
Concave shape collision.
Glass-like material are difficult to adjust🔮✨
@CodePen #codepen #threejs #ammojs
https://codepen.io/wakana-k/pen/yLqOWVE
New year, new #CodePenChallenge!
This month, we're digging into what's new in CSS 💻
Let's kick things off with :has()
Thanks @koredotai for sponsoring!
https://codepen.io/challenges/2023/january/1
RT T. Afif @ CSS Challenges
🗓️ 2022 ⟶ 2023
Demo:
#CSS #HappyNewYear
http://codepen.io/t_afif/full/ZEjOEmW
https://twitter.com/ChallengesCss/status/1609323510890889216
RT Ryan Mulligan
CSS skateboard [w/ GSAP Observer]
Check it out on @CodePen:
https://codepen.io/hexagoncircle/full/GRBJLwE
https://twitter.com/hexagoncircle/status/1608225016071737344
RT Jon Kantner
My last Pen for the year, a preloader with a smile
https://codepen.io/jkantner/pen/VwBaGpg
Good to know: you can animate `grid-template-columns` and `grid-template-rows` now.
(Ain't editable embeds nice?)
https://web.dev/web-platform-10-2022/
RT David Aerne
I challenged myself to recreate @jerbosmans stunning "#077 spectrum" poster in CSS on @CodePen
#color #creativecoding #generative
https://codepen.io/meodai/full/OJwMXaL
RT Jon Kantner
Here’s how a switch would work if the handle were tossed in the air!
https://codepen.io/jkantner/pen/xxJZdMR
RT Yoav Kadosh
A beautiful 3D color picker, inspired by @Volorf's design.
@CodePen :
https://codepen.io/ykadosh/pen/PoBPKvJ
It's the final week of our Weather Effects #CodePenChallenge ⛄️🌧🌬🌞
And it's the last challenge of 2022!
This week, we're letting the sunshine in 🌞
Thanks @ionos_com for sponsoring!
https://codepen.io/challenges/2022/december/4
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
