@RT Sebastian Graz
Stop using `position:absolute` for everything.
Building a slideshow where the <li/>’s are stacked on top of each other?
Use `grid-area: 1 / 1` instead
https://codepen.io/sebastiangraz/pen/MWBvLaz
https://twitter.com/grazsebastian/status/1615001659226345475
New week, new #CodePenChallenge!
This week, get ready to Fire up the 'Fox or go on Safari to explore subgrid 🦊🧭
Thanks @koredotai for sponsoring!
https://codepen.io/challenges/2023/january/3
RT Ricardo Oliva Alonso
3D Walkman made with HTML, CSS and JavaScript - Designed by michaelyeah.
Live @CodePen:
#html #css #javascript #cssart #3D #isometric #voxelart #music #sony #walkman
https://codepen.io/ricardoolivaalonso/pen/RwBZMGB
RT jhey 🔨🐻✨
CSS Tip! ✨
Did you know you can animate CSS Grid tracks? 👀
ul:is(:hover,:focus-within) {--active: 1;}
ul {
grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px)));
transition: all 0.2s;
}
Adjust layouts based on interaction! 😎
@CodePen link below! 👇
RT Adam Argyle
heading to Chrome 111 🎉
enables applying the An+B logic on a sub-selection 🤓
try it
<div class="rsshub-quote">
Intent To Ship: Blink: Intent to Ship: CSS Selectors 4 Pseudo-Class :nth-child(an + b of S)
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/20230112103247.dlep4m4lsdr5haxa%40sesse.net
</div> https://twitter.com/argyleink/status/1613579129823318016
RT Ksenia Kondrashova
Also, my on-scroll folding box is now available on @CodePen
Made with @threejs and @greensock
#threejs #webgl #scrollanimation #gsap
https://codepen.io/ksenia-k/pen/dyjWPdp
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
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
