@RT Ana Tudor 🐯🖤🌻
TIL: Comic Mono is available on CodePen! 😍
PS - please throw apples or oranges or any other fruit I actually like to eat, not tomatoes at me. Thank you!
<div class="rsshub-quote">
Chris Coyier: Coding Fonts I’d Actually Use
https://chriscoyier.net/2023/01/18/coding-fonts-id-actually-use/
</div>
https://twitter.com/anatudor/status/1615740348285739017
RT Björn Hjorth
Uploaded my CSS Sprite animation to @CodePen, use the WASD and take the duck for a spin
👉
#gamedev #javascript
https://codepen.io/colorsofcode/pen/LYBzvdM
RT netsi1964 🙏🏻
A pen on @CodePen I made 6 years ago is still funny to play around with: “Tomato - Dynamic Image Colorizing with <input type="color">” #html #javascript #css
https://codepen.io/netsi1964/full/JKgRQb/?fbclid=IwAR32trJZ1EvAXezClkUP3Ojl1bKPmeTPViaDzQNw7zNXCZF3Ud1JxzwIXXk
RT Jon Kantner
A range slider with a value that slides, too
https://codepen.io/jkantner/pen/WNKZbmZ
"genuary12 - we see what we see" by Sophia
https://codepen.io/fractalkitty/pen/jOpmZQP
RT Callum Macrae
Made a codepen inspired by a @JoanieLemercier tweet in december. Really pleased with how it turned out, even though it took waay longer than I planned it to!
#threejs
https://codepen.io/callumacrae/full/qByPVNr
RT Carl 💥 Creative Coding Club
#SVG Animation Pro Tip: Feathered Colorize 💥
See how we can apply an SVG clip-path and mask to the same image to create this wonderful effect.
Built with @BoxySVG @CodePen @greensock
https://codepen.io/snorkltv/pen/rNKGawL
RT Wakana Y.K.
My latest work💊
Colorful vitamins
Demo:
@CodePen #codepen #threejs
https://codepen.io/wakana-k/pen/mdjMJZK
RT Ksenia Kondrashova
#genuary16 as an excuse to publish this one
Cheap way to turn @threejs primitive to disco ball
- instanced planes w/ matcap material
- positions & normals taken from original geometry merged vertices
Hosted on @CodePen
#genuary #threejs #matcap #codepen
https://codepen.io/ksenia-k/pen/ZEjJxWQ
RT Evan Jin (진경성)
We can cut any Dom elements using this ✂️ (clip-path)
Demo:
Posted On @CodePen
#javascript #css #clippath #cutter
https://codepen.io/rudtjd2548/full/xxJLpxJ
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 Rob DiMarzo
:has() has my jaw on the floor once again 😮
A collection of :has() css demos from the @CodePen community last week:
https://codepen.io/collection/NqEmKm
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
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
