CSS by T. Afif :verified: · @css
918 followers · 344 posts · Server front-end.social
Turn your images into an old style Film Strip! #CodePenChallenge
Demo: https://codepen.io/t_afif/full/yLGBPXO via :codepen: @codepen
Fractal Kitty · @fractalkitty
978 followers · 531 posts · Server mathstodon.xyz
automata photo filter - https://codepen.io/fractalkitty/full/OJrLMjb/6cf56d5837d4be67172ac23999fe54e6
Only one set of rules is implemented(but the possibilities are endless)
#gameOfLife #gol #cellularAutomata #pixelArt #mathArt #PNW #hummingbird #p5js #processing #codepenChallenge #photography #filters #creativeCoding #wccChallenge
#wccchallenge #creativecoding #filters #photography #codepenchallenge #processing #p5js #hummingbird #pnw #mathart #pixelart #cellularautomata #gol #gameoflife
CSS by T. Afif :verified: · @css
904 followers · 332 posts · Server front-end.social
Something for this week #CodePenChallenge
Demo: https://codepen.io/t_afif/full/poQmvOM via :codepen: @codepen
Fractal Kitty · @fractalkitty
838 followers · 447 posts · Server mathstodon.xyz
Codepen toggle challenge:
https://codepen.io/fractalkitty/full/abQbMgO
comment poem included
three toggles sit as static circles at the bottom of the canvas.
#cpc-toggles #codepenChallenge #p5js #creativeCoding #poetry #mathart #noAI
#noai #mathart #poetry #creativecoding #p5js #codepenchallenge #cpc
Adam Kuhn · @cobra_winfrey
319 followers · 77 posts · Server front-end.socialgot another one in for this week's "synthetic textures" #CodePenChallenge - a reflective metallic SVG displacement-powered button
disclaimer:
it's gonna need to access your webcam and then it's gonna want to melt your motherboard and you're prob gonna want punch me if you attempt to open this in Safari
Adam Kuhn · @cobra_winfrey
306 followers · 70 posts · Server front-end.socialtwo for one on this week's #CodePenChallenge play button prompt, didn't have a plan so some spaghetti CSS but whatevs
thanks for lookin'
Adrian Roselli · @aardrian
1631 followers · 12632 posts · Server toot.cafeI forked another one:
https://twitter.com/ChallengesCss/status/1639022975138791426
And made it (more) accessible:
https://codepen.io/aardrian/full/dyqwRBr
Same HTML, JavaScript, and #accessibility considerations, but different CSS. Same limitations.
#a11y #codepenchallenge #accessibility
Adrian Roselli · @aardrian
1632 followers · 12621 posts · Server toot.cafeI forked this:
https://twitter.com/ChallengesCss/status/1638646319026786305
And made it (more) accessible:
https://codepen.io/aardrian/full/XWPobYd
• prefers-reduced-motion,
• Has accName,
• Is disclosure widget,
• Hides gallery from accTree,
• Uses correct element as trigger,
• Uses JS for state.
CSS by T. Afif :verified: · @css
597 followers · 145 posts · Server front-end.socialAn expanding gallery for this week #CodePenChallenge
🌟 A CSS-only version with minimal code
Demo: https://codepen.io/t_afif/full/JjaebpJ via :codepen: #CodePen
#codepenchallenge #codepen #css
CSS by T. Afif :verified: · @css
591 followers · 141 posts · Server front-end.socialAnother experiment with radio buttons for #CodePenChallenge
🌟 CSS-only using trig functions and :has() selector
Demo: https://codepen.io/t_afif/full/bGxMeJJ via :codepen: #CodePen
Use the keyboard and hold the key down for some magic levitation 🤩
You can add as many input as you want!
#codepenchallenge #codepen #css
CSS by T. Afif :verified: · @css
589 followers · 140 posts · Server front-end.socialA jumping radio button? Why not!
A fun little experience for this week #CodePenChallenge
🌟CSS-only powered by the :has() selector and some magic cubic-bezier()
Demo: https://codepen.io/t_afif/full/abaYxQj via :codepen: #codepen
#CSS
#codepenchallenge #codepen #css
Adam Kuhn · @cobra_winfrey
305 followers · 69 posts · Server front-end.socialnot my cleanest work but put together a twee lil JS-free pen for this week's #CodePenChallenge using their base pen and some hacky :has() logic
Adam Kuhn · @cobra_winfrey
304 followers · 67 posts · Server front-end.socialbeen grinding away towards some milestone launches at work so making every effort to touch grass when possible; simply haven't had the time or mental capacity for creative work.
did manage to squeak in an entry for this week's button-themed #CodePenChallenge - using some gooey CSS filtering + mix-blend-mode overlays and as little JS as I could manage:
https://codepen.io/cobra_winfrey/full/mdGBGEO
anyhow, miss y'all and promise to reconnect with the community soon.
Josh Collinsworth · @collinsworth
345 followers · 403 posts · Server hachyderm.ioI'm not on Twitter or Instagram anymore; is #CodePenChallenge a thing here? https://codepen.io/collinsworth/pen/zYJdzgV
· @Pumaparded
59 followers · 88 posts · Server mastodon.social
Ana Tudor 🐯 · @anatudor
892 followers · 811 posts · Server mastodon.social
Something for this week's #CodePenChallenge: 1 div grainy/ dithered gradient blob with a simple SVG filter https://codepen.io/thebabydino/pen/GRBrWeY
I've given this concept a try before https://twitter.com/anatudor/status/1407388305948397571 but lately, I've been toying with SVG filters a bit more and... I got better at it...🤷♀️
#CSS #SVG #CodePen #SVGFilter #dither #grainy #gradient #blob #webDev #webDevelopment #compositing #maths
#codepenchallenge #css #svg #codepen #SVGFilter #dither #grainy #gradient #blob #webdev #webdevelopment #compositing #maths
Ana Tudor 🐯 · @anatudor
885 followers · 805 posts · Server mastodon.socialAlso made a scroll-driven angled slide for the same #CodePenChallenge - see it on @CodePen https://codepen.io/thebabydino/full/zYJKRyq
Uses pure #CSS scroll-driven animations to make angled content section also slide right on vertical scroll.
Uses CSS shapes to make text flow along angled edges.
#CodePen #maths #trigonometry #CPCAngled #coding #webDev #webDevelopment
#codepenchallenge #css #codepen #maths #trigonometry #cpcangled #coding #webdev #webdevelopment
Ana Tudor 🐯 · @anatudor
883 followers · 804 posts · Server mastodon.socialMade a pure #CSS thing for the angled #CodePenChallenge https://codepen.io/thebabydino/pen/ExePBZp
✨tan to compute vertical spacing
✨responsive, no angle change on resize
✨no section background distortion (as skew does)
✨heavily commented
✨interactive angle change if browser supports tan()
#CodePen #maths #trigonometry #CPCAngled #coding #webDev #webDevelopment
#css #codepenchallenge #codepen #maths #trigonometry #cpcangled #coding #webdev #webdevelopment
Ana Tudor 🐯 · @anatudor
876 followers · 770 posts · Server mastodon.social
For this week's #CodePenChallenge, a pure #CSS responsive infographic https://codepen.io/thebabydino/pen/gOdPzEK
On the how behind it, I wrote this CSS-Tricks article https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/ back in 2018.
#codepenchallenge #css #codepen #cssvariables
· @Pumaparded
57 followers · 76 posts · Server mastodon.social