"My living room" by Patricia Masigla (Make sure to follow the link to the photo of her IRL living room).
https://codepen.io/pbmasigla/pen/poEmPYo
RT Chris Gannon
Interactive @LottieFiles record/stop button with intro @CodePen (with commented #javascript)
https://codepen.io/chrisgannon/pen/QWKXRpr
RT Trung Vo
A cool blur effect when hovering on a table row using purely CSS text-shadow 😆
See the code ➡️
Table is still a fundamental piece when we want to represent tabular data such as financial data, a calendar, the nutrition facts information panel, etc.
https://codepen.io/trungk18/pen/OJRepGp
RT dumpsterfirepatty
I’ve missed CSS and I love my living room setup, so I combined both and made my living room with a single DIV and pure CSS
(p.s. if anyone has tips on caring for Birds of Paradise pls halp 😭)
https://codepen.io/pbmasigla/pen/poEmPYo
It's the final week of the January #CodePenChallenge!
To wrap up the States of Matter Challenge, our host @rosieebob has us experimenting with the plasma state of matter ☀️
https://codepen.io/challenges/2021/january/4
RT Fabrizio Calderan
1/2 — Be aware of these special CSS keywords: fit-content, min-content and max-content.
https://codepen.io/fcalderan/pen/dypEPqG?editors=1000
RT Bramus!
✨ New scroll-animations demo: A (contact) list where items that come into view fly-in.
Comes in two flavors:
- JavaScript Web Animations API (WAAPI) + ScrollTimeline:
- CSS-only with @scroll-timeline:
https://codepen.io/bramus/full/ExgJPjM
https://codepen.io/bramus/full/bGwJVzg
RT Johan Karlsson
Genuary 6 Triangle Subdivision on @CodePen:
Click to generate a new pattern!
#genuary #genuary2021 #creativecoding #mathart #geometric #generative #generativeart
https://codepen.io/DonKarlssonSan/full/eYdobNK
https://twitter.com/DonKarlssonSan/status/1352677528805257217
RT ilithya
2_LiveCodingSession ✨
First stream of the yr with @iamelizasj in our Twitch Channel ☺️
I love this spontaneous pattern we came up with. It was wonderful to code & chat with some of you who were there 🖤 thanks
#shadercollab #anydayshaders
https://codepen.io/ilithya/full/MWjBBYW
https://twitter.com/ilithya_rocks/status/1352608553794732041
RT Stephanie Eckles
🟣 CSS Grid
Achieve responsive Grids in as little as 3-5 properties thanks to special functions like `repeat()`, `minmax()`, & `fr` unit.
Tutorials:
📺 Responsive Grid ~4 mins:
@CodePen w/ demo layouts:
http://moderncss.dev/topics/#grid
http://5t3ph.dev/rgs
https://codepen.io/5t3ph/pen/qBBgMdp
RT Tatiana Mac
Happy Friday! I coded this @KingJames stat card. With a timebox of two hours, my goal was to not rely on media queries for responsiveness while maintaining the spirit of the design. Imperfect but done for now!
🔗 Codepen:
Los Angeles Lakers: These two were feelin' it from deep 🔥🔥 #LakersWin
RT Louis Hoebregts
I recently saw a gif of an artist creating portraits with nothing but dices 🎲
Here is my version made with @p5xjs, @threejs_org & @greensock on @CodePen 👇
Turn on your webcam and watch the dices rolling 📹🎲
(yes perfs are aweful 😅)
https://codepen.io/Mamboleoo/pen/abmMwPM
RT Amit Sheen
Yesterday I had an amazing live coding session with the "CSS Masters Israel" community. We built an animated 3D dodecahedron, and talked a lot about perspective and transforms in CSS.
Full session: (in Hebrew)
The final result:
https://youtu.be/lU_UTTNrDJY
https://codepen.io/amit_sheen/pen/BaLbeeX
RT Chris Coyier
Señor @alexquez and I chatting about a new internal service we built at @CodePen.
It's about hitting your own URLs rather than third-party URLs. It can be faster, cheaper, and more secure, with a smidge of work.
https://blog.codepen.io/2021/01/20/299-meet-cphub/
RT Melissa McEwen
Ported my random rainbow generator 🌈 to @skypackjs + @CodePen
https://codepen.io/melissamcewen/pen/mdrgexd
https://twitter.com/melissamcewen/status/1352039560449044482
RT Álvaro Montoro
Not as spectacular (or gassy) as other pens. But here's an entry for the #CodePen challenge: an animation of a gassy shark... doo doo, doo doo doo doo!
https://codepen.io/alvaromontoro/full/zYKbRgP
https://twitter.com/alvaro_montoro/status/1352250815726166021
RT aexcode
For my second #codepenchallenge, I learned how to make this complex border with pure CSS & I incorporated some responsive text!
↗️
@CodePen
The image is a recreation of Mark Boehly's Hot Air Balloon Stamp on
@dribbble:
http://codepen.io/aexcode/full/oNzVWYo
http://dribbble.com/shots/9108608-Hot-Air-Balloon-Stamp
RT Ana Tudor 🐯
I did something special on @CodePen
Memorial
https://codepen.io/thebabydino/pen/WNGPjLx
https://codepen.io/collection/DqGWek
RT David Fitzgibbon
Re A quick doodle of Andy Warhol's Marilyn Monroe portrait in @p5xjs
https://codepen.io/loficodes/pen/poEqLwK
Build, test, and discover front-end code 👩🏽💻