@RT T. Afif @ CSS Challenges
💡 CSS Tip!
Make an element stay at the top/right corner of your responsive grid using one instruction.
👉 `grid-area: 1/auto/auto/-1` ( grid-row-start:1;grid-column-end:-1)
The element can be anywhere in your HTML code.
Demo:
#CSS
https://codepen.io/t_afif/pen/OJxryBy
https://twitter.com/ChallengesCss/status/1481602860504727555
RT S. Shahriar
I have two viva exams in a row (14-15 Jan)
I am terrified about it 😱
So, I made a @CodePen demo with CSS `resize` property to reduce my stress 😅
Wish me luck! ✨✨
Hint: try dragging the resize handle at the bottom-right corner of the text 😄
https://codepen.io/ShadowShahriar/full/ZEXVLbB
https://twitter.com/ShadowShahriar/status/1481664476646895620
RT Chris Gannon
Claymorphic Heart 💗 @CodePen
https://codepen.io/chrisgannon/pen/VwMVQEx
RT Jhey 🔨🐻✨
Really wasn't what was planned 😅
But put together a pen for creating 3D CSS Cylinders with Pug Mixins and CSS Custom Properties ✨
Needed for another pen I was playing around with 👀
Hello high school Math! 👋
ʕノ•ᴥ•ʔノ ︵ ┻━┻
👉
http://codepen.io/jh3y/pen/jOGQXBz
RT Jon Kantner
Isometric Color Picker
https://codepen.io/jkantner/pen/xxXmVKw
RT Amit Sheen
Pure CSS 3D Stickman.
With walking and running animation, and manual 360 rotation.
(Concept for basic character rigging with CSS)
Full code @CodePen:
https://codepen.io/amit_sheen/full/abLPdoQ
RT Johan Karlsson
#genuary 12 is Packing, so I made* "Heart Packing" on @CodePen:
Click to get a new random pattern! 👆🎲
Press 'd' to download the SVG file. ⬇️💾
#generative #creativecoding #genuary2022 #circlepacking
*found an old prototype that I completed
https://codepen.io/DonKarlssonSan/full/QWEYXJy
https://twitter.com/DonKarlssonSan/status/1481379068067123200
RT George Francis
Hey! I made something fun for this week's @CodePen noise challenge — a generative animation/design called "Personal Space" ✨
Made with @greensock / noise / SVG / *magic*! 💛
https://codepen.io/georgedoescode/full/ExwdJZq
https://twitter.com/georgedoescode/status/1481233839389392896
💕 The Most Hearted of 2021!
Check out all 100 incredible Pens here:
🔊 On CodePen Radio, @chriscoyier and @mmosley look back on a year of amazing creations
https://codepen.io/2021/popular/pens/
https://blog.codepen.io/2022/01/12/350-2021s-most-hearted/
💕 The Most Hearted of 2021!
🥁
At #1 is @AysnrTrkk's "Glassmorphism Creative Cloud App Redesign"
https://codepen.io/TurkAysenur/pen/ZEpxeYm
💕 The Most Hearted of 2021!
At #2 is Tom Miller's "Parallax Photo Carousel"
https://codepen.io/creativeocean/pen/mdROBXx
💕 The Most Hearted of 2021!
At #3 is @AysnrTrkk's "Skateboard Video Platform"
https://codepen.io/TurkAysenur/pen/LYRKpWe
💕 The Most Hearted of 2021!
At #4 is @mikaelainalem's "About Us Pop-Out Effect"
https://codepen.io/ainalem/pen/QWGNzYm
💕 The Most Hearted of 2021!
At #5 is @abxlfazl1's "Animated Tab Bar v.2"
https://codepen.io/abxlfazl/pen/OJbEbxL
💕 The Most Hearted of 2021!
At #6 is @gggayane's "Magic Card"
https://codepen.io/gayane-gasparyan/pen/jOmaBQK
💕 The Most Hearted of 2021!
At #7 is @georgedoescode's "Generative UI - Orb Animation [pixi.js] + Frosty Elements"
https://codepen.io/georgedoescode/pen/XWNmvro
💕 The Most Hearted of 2021!
At #8 is @jh3yy's "3D CSS Plane"
https://codepen.io/jh3y/pen/NWdNMBJ
💕 The Most Hearted of 2021!
At #9 is Yuki's "GLSL Sample027"
https://codepen.io/Web_yuki1027/pen/yLgYpWM
💕 The Most Hearted of 2021!
At #10 is @BiedermannMarco's "React Color Gradients"
https://codepen.io/marcobiedermann/pen/WNGWzYR
RT Bence
This one fits nicely in this week's #CodePenChallenge, which is about noise. The texture is generated in three steps:
1️⃣Perlin noise
2️⃣Lookup table
3️⃣Diffuse lighting
Eroded Wall 🔨 (441 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/qBPJLQa
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
