#CodePenChallenge
It's the final week of the May #CodePenChallenge!
This week, let's style some ❝testimonial quotes ❞
https://codepen.io/challenges/2023/may/4 https://t.co/BAKvKZbI0s
:sys_twitter: https://twitter.com/CodePen/status/1660675420377739264
The "Typography of Quotes" #CodePenChallenge continues!
This week, we're working with pull quotes 💻
https://codepen.io/challenges/2023/may/3 https://t.co/rSLvVVAE8U
:sys_twitter: https://twitter.com/CodePen/status/1658139380811169794
RT Jordan Dey
#CodePenChallenge inspired me to create another quotes work! Check out my latest creation featuring random quotes from Breaking Bad with a cool animation 🗣️
@CodePen: https://codepen.io/DeyJordan/pen/ExdLazx
#BreakingBad #HTML #CSS #animation #WebDesign #FrontEnd https://t.co/tbzFSR7zyF
:sys_twitter: https://twitter.com/DeyJordan/status/1656677547348987910
The Typography of Quotes #CodePenChallenge continues!
This week, we're working with blockquotes 🧱
https://codepen.io/challenges/2023/May/2 https://t.co/t5Uo4DdWDb
:sys_twitter: https://twitter.com/CodePen/status/1655606964112568322
RT Jordan Dey
Check out my submission for the #CodePenChallenge!🎨
I created a poster with famous Marvel quotes🦸♂️💬
Take a look at my @CodePen: https://codepen.io/DeyJordan/pen/ZEqadrm
#HTML #CSS #design #web #dev #developer #development #FrontEnd #typography #fontvariable #UI #Code #Inspiration https://t.co/gTCjTtlhFV
:sys_twitter: https://twitter.com/DeyJordan/status/1654138083435065344
RT kotAndy 🐾
I couldn’t resist taking the opportunity to congratulate everyone on #StarWarsDay ✨ via @CodePen
May the 4th be with you ❤️
https://codepen.io/kotAndy/full/mdzqQKW
#CodePenChallenge #typography #creativecoding #typescript #codepen @PixiJS https://t.co/iTRyZ6asQi
:sys_twitter: https://twitter.com/raccoontend/status/1654184983961952257
RT Jesse Couch
Finished up a small #CodePenChallenge Quote Poster on @CodePen - hope you like it!
https://codepen.io/designcouch/pen/NWOabNR
:sys_twitter: https://twitter.com/designcouch/status/1653135357460750367
The May #CodePenChallenge starts now!
This month, we're working on the typography of quotes 💭
Let's begin with a quote poster!
https://codepen.io/challenges/2023/may/1 https://t.co/aRfejaLNO5
:sys_twitter: https://twitter.com/CodePen/status/1653061669390630914
RT Sarah-Elizabeth Laws
Introducing Silkmorphism🪡🧵:
For this week #codepenchallenge on handmade textures.
For when you want your UI to look handstitched. 🤔
https://codepen.io/akalaws/pen/YzJZRMM via @CodePen
(Bonus: it stretches on hover 😄)
:sys_twitter: https://twitter.com/codingLaws/status/1650856097362898953
It's the final week of the Textures #CodePenChallenge!
This week, we're working with handmade textures 🪡🧶🖌
https://codepen.io/challenges/2023/april/4
Thanks @koredotai for sponsoring! https://t.co/F4Jpbkzzdg
:sys_twitter: https://twitter.com/CodePen/status/1650528821492211713
RT Bence
Reptilian Scales 🐍 (558 bytes) #PetitePatterns on @CodePen #CodePenChallenge
https://codepen.io/finnhvman/pen/WNaoLYa https://t.co/EvItInryEd
:sys_twitter: https://twitter.com/finnhvman/status/1649313072811499523
The Texture #CodePenChallenge continues!
This week, we're taking inspiration from flora & fauna 🌸🦌
https://codepen.io/challenges/2023/April/3
Thanks @koredotai for sponsoring! https://t.co/xhfN9HcKRS
:sys_twitter: https://twitter.com/CodePen/status/1647985883524616195
RT Matthias Hurrle
Yet Another Textured Glass Block https://codepen.io/atzedent/pen/eYPZqbg via @CodePen #codepenchallenge https://t.co/tIOJ9HPMaF
:sys_twitter: https://twitter.com/softwaretogo/status/1647925415174914048
RT Bence
Liquid Metal 🦾 (551 bytes) #PetitePatterns on @CodePen #CodePenChallenge
https://codepen.io/finnhvman/pen/XWxbGQg https://t.co/NWjb6G1fPP
:sys_twitter: https://twitter.com/finnhvman/status/1645793625878724613
RT Sarah-Elizabeth Laws
The button pin badge!
Inspired by the badges I'd decorate my bag with as a teen for this week #codepenchallenge.
They might make for a fun alternative navigation or CTA maybe..
What do you think a fun use case could be?
https://codepen.io/akalaws/pen/QWZbeWy via @CodePen
:sys_twitter: https://twitter.com/codingLaws/status/1645893859279290368
got 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
RT Bence
SVG filters are quite powerful. This image is 2.1 MB in JPG format, while in SVG it's only 480 bytes 🤯
Sand Grooves 🏖️ (480 bytes) #PetitePatterns on @CodePen #CodePenChallenge
https://codepen.io/finnhvman/pen/mdzbOEj https://t.co/bLGZyGHEco
:sys_twitter: https://twitter.com/finnhvman/status/1643284409087406088
The April #CodePenChallenge starts now 💎
This month is all about Texture.
We're kicking things off with earthy textures 🌎🪨🏝
https://codepen.io/challenges/2023/april/1
Thanks @koredotai for sponsoring! https://t.co/bQjeACPy6m
:sys_twitter: https://twitter.com/CodePen/status/1642922226847555585
RT Jesse Couch
Fun little bit of work on @CodePen for today's #codepenchallenge.
https://codepen.io/designcouch/pen/Jjaqrgg
:sys_twitter: https://twitter.com/designcouch/status/1641523872078897164
two for one on this week's #CodePenChallenge play button prompt, didn't have a plan so some spaghetti CSS but whatevs
thanks for lookin'
RT Juxtopposed
just made this design for the @CodePen play button challenge. been wanting to make this animation for a while now.
check it out on CodePen for a little surprise (it's not rickroll, I promise): https://codepen.io/Juxtopposed/pen/vYzPrbg
#CodePen #CodePenChallenge https://t.co/oPvF6KFlVJ
:sys_twitter: https://twitter.com/juxtopposed/status/1640816049062035457
RT Matthias Hurrle
Reflections of Lullabies
To play a lullaby, press the button. Don't forget to turn on the 🔉 sound.
https://codepen.io/atzedent/pen/QWVPyLL via @CodePen
#codepenchallenge #webgl #shader #animation https://t.co/9C1uUWgROb
:sys_twitter: https://twitter.com/softwaretogo/status/1640819933289259011
It's the final week of the Buttons #CodePenChallenge!
This week, let's play! We're focusing on "play" buttons ▶️
https://codepen.io/challenges/2023/March/4 https://t.co/487Z7WT1ut
:sys_twitter: https://twitter.com/CodePen/status/1640397195223482391
I 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.
I 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.
RT T. Afif @ CSS Challenges
An expanding gallery for this week #CodePenChallenge
🌟 A CSS-only version with minimal code
Demo: http://codepen.io/t_afif/full/JjaebpJ via @CodePen
#CSS https://t.co/LQfr5WqXmB
:sys_twitter: https://twitter.com/ChallengesCss/status/1638646319026786305
An expanding gallery for this week #CodePenChallenge
🌟 A CSS-only version with minimal code
Demo: https://codepen.io/t_afif/full/JjaebpJ via :codepen: #CodePen
RT Matthias Hurrle
Creek
Procedural noise this time creates the impression of flowing water of a small creek. Turn on the sound 🔉 and dive in. https://codepen.io/atzedent/pen/yLxRzeL via @CodePen #codepenchallenge #webgl #shader https://t.co/TkCuaNVvqM
:sys_twitter: https://twitter.com/softwaretogo/status/1638236406668488729
The "Buttons" #CodePenChallenge continues 💪
This week, let's expand on the theme with Expanding Buttons!
https://codepen.io/challenges/2023/march/3 https://t.co/BhxswX1I2o
:sys_twitter: https://twitter.com/CodePen/status/1637842949257015297
RT T. Afif @ CSS Challenges
A jumping radio button? Why not! #CodePenChallenge
🌟CSS-only powered by the :has() selector and some magic cubic-bezier()
Demo: http://codepen.io/t_afif/full/abaYxQj via @CodePen
#CSS https://t.co/B8mYrQtwCC
:sys_twitter: https://twitter.com/ChallengesCss/status/1635756368681398272
Another 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!
A 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
not 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
The March #CodePenChallenge continues!
For week 2 of the Buttons challenge, let's turn up the radio 📻
https://codepen.io/challenges/2023/march/2 https://t.co/OiWiFRVOlb
:sys_twitter: https://twitter.com/CodePen/status/1635312247613403141
Would have loved to do something for this week's #CodePenChallenge, but the past weeks have had too many tech (both hardware & software) and non-tech problems eating out of my time, so all I have is a bunch of older button demos I made on #CodePen:
been 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.
RT Ashraff Hathibelagal
Experimenting with matter.js, a physics library.
https://codepen.io/hathibelagal-dev/pen/xxaXRbg
#javascript #matterjs #codepenchallenge https://t.co/LeOsssfK3d
:sys_twitter: https://twitter.com/Hathibel/status/1633225743248375812
RT Tom Hinton
#CodePenChallenge: Random Button
https://codepen.io/TomHinton/pen/VwGzzEM https://t.co/XXcBGLQHWo
:sys_twitter: https://twitter.com/pumaparded/status/1632893770420170757
For the latest #CodePenChallenge: grainy dissolving an image's edges https://codepen.io/thebabydino/pen/oNMBeye?editors=1100
Done with #CSS + an #SVG filter, heavily commented.
For comparison, the original image in the img tag which you can see on right click, open image in new tab.
RT kotAndy 🐾
Never thought I’d be able to create something like that, using @p5xjs and #shaders 😍 I used it for the first time and it was a challenging but rewarding experience!
Just finished my new pen for #Codepenchallenge on @CodePen 😊
https://codepen.io/kotAndy/full/rNZjWoE https://t.co/DYJ8HXP72Z
:sys_twitter: https://twitter.com/raccoontend/status/1630636558553366546
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
Also 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
Made 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
RT T. Afif @ CSS Challenges
Demo: http://codepen.io/t_afif/full/xxaOXQr via @CodePen
#CSS #CodePenChallenge https://twitter.com/ChallengesCss/status/1628528831681134592 https://t.co/RCycUQoHSQ
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 🎨 A CSS Pattern for this week #CodePenChallenge
Demo: http://codepen.io/t_afif/full/MWqyNzx via @CodePen
More CSS-only Patterns 👉 http://github.com/Afif13/CSS-Pattern
#CSS https://t.co/XU3J5qfp8m
</div>
:sys_twitter: https://twitter.com/ChallengesCss/status/1628781626346946561
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.
Something completely different for this week's #CodePenChallenge, a pure #CSS rainbow cube wave 🌈 🌊 https://codepen.io/thebabydino/pen/OJvYZrx
Inspired by this @beesandbombs creation https://twitter.com/beesandbombs/status/1562937289784844288
Pure #CSS cube oscillations also for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/vYjWWjb
Inspiration https://giphy.com/gifs/motionaddicts-animated-motion-addicts-Hy8emed1vIQPC (to which I added some 🌈 to make it look less sad)
And some pure CSS oscillating cubes https://codepen.io/thebabydino/pen/VwWWYyR
Inspiration https://www.instagram.com/p/Bx5DxUQHczF/ (to which I added animation)
Now here's a very simple one: cubetion https://codepen.io/thebabydino/pen/jOLLoNx
Inspired by this Dribbble https://dribbble.com/shots/3103787-Cubetion
And another simple one: busy cuboids https://codepen.io/thebabydino/pen/BaWmobM
Inspired by this Shutterstock video https://www.shutterstock.com/video/clip-1038265412-abstract-3d-render-background-made-rectangular-shapes
Pure #CSS, also for this week's #CodePenChallenge.
Also in the 6 pyramids in a cube category... here's a pure #CSS fire cube flower https://codepen.io/thebabydino/pen/VwQrKwa
Uses the staggering from middle technique I explained in this CSS-Tricks article https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ - this is why cross-browser abs() in CSS would be so useful!
Inspired by a @beesandbombs gif https://twitter.com/beesandbombs/status/1510754721128189952
Something completely different: pure #CSS cube halftone waves https://codepen.io/thebabydino/full/RwQjpmQ
There's no SVG, no images, no canvas. Only CSS.
Such halftone effects are something I've been toying with for 3+ years. Gave a talk explaining the how behind https://codepen.io/thebabydino/project/full/ZjwjBe & kept refining the technique since through Pens like https://codepen.io/thebabydino/full/NWxBzRv or https://codepen.io/thebabydino/full/QWMRWRQ or https://codepen.io/thebabydino/full/LYyNVJQ or https://codepen.io/thebabydino/full/gOpMeWv
#CodePen #CodePenChallenge #CPCCubes #3D #geometry #maths #halftone
I've posted a bunch of 3D shape morphing sequences before - truncation, rectification, expansion, snubification... but here's something new!
cube → chamfered cube → rhombic dodecahedron https://codepen.io/thebabydino/full/rNdjLdq
tetrahedron → chamfered tetrahedron → cube
https://codepen.io/thebabydino/full/MWVJVKE
These are pure #CSS. Done with 3D transforms, no WebGL here. Both have an explanation for how the process works in the #CodePen description.
PS needs @property support.
I've coded *a lot* of CSS 3D stuff over the years (it's most of what's featured on my #CodePen profile https://codepen.io/thebabydino) and this week's #CodePenChallenge is cubes, so here are a bunch of new cuboid demos...
1 div, pure CSS 3D illusion: cube/ hex https://codepen.io/thebabydino/pen/vYdMQVr
My first #codepenChallenge and picked pen for this year 😊👩💻
Thank you @CodePen 💚
https://codepen.io/HighFlyer/full/WNgbwVJ
RT Amit Sheen
Did a whole bunch of cubes 🧊 in my time, but since this week's #CodePenChallenge is 'Cubes', I wanted to do something I've been thinking about for a long time.
The Cube of Cubes!
(#CSS only)
Live demo @CodePen:
https://codepen.io/amit_sheen/full/yLxLOKR
:sys_twitter: https://twitter.com/amit_sheen/status/1625414221667131392
Here it is, my 2nd Pen for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/qByGqOm
Uses an input[type=range] for the slider + an output & datalist tied to this input for the current value display & ruler.
No SVG, no images in general save for #CSS gradients. If you're wondering how, here's an older vid of me coding something of the kind from scratch https://www.youtube.com/watch?v=4NE1gwa8oOM
Inspiration https://dribbble.com/shots/18436713-UI-UX-slider-control-fluid-animation-interactive-design
About the support info boxes https://mastodon.social/@anatudor/109479606568310684
What do you think? 🙃
I know it's Saturday, but I made a thing for this week's #CodePenChallenge https://codepen.io/thebabydino/full/MWBNrZq
Just code, no images. Building on a few other techniques shared before, such as:
* simple #SVG graininess https://stackoverflow.com/a/75054687/1397351
* inset shadow on irregular shapes https://codepen.io/thebabydino/pen/abVgQJB/d5509feda55bc5d205666dbe6db4fc67
* embossing irregular shapes https://codepen.io/thebabydino/pen/RwjzEpm
What do you think?
Visual idea https://twitter.com/Aximoris/status/1623964038542639107
RT Tom Hinton
Quick little thing for @CodePen's
#CodePenChallenge: Round. @threejs , @greensock and some shader bits.
https://codepen.io/TomHinton/pen/dyjLmya
:sys_twitter: https://twitter.com/pumaparded/status/1622873947321643008
quick code tonight - codepen challenge - wind
https://codepen.io/fractalkitty/live/xxJxQdB
it's probably going to run slow for some.
no comments + messy code slapped together like paints on a palette.
Another pen for #CodePenChallenge 💙
Raining 🌧️☔️🌦️
(and not really, I don't love rain🙃)
@CodePen link: https://codepen.io/HighFlyer/full/KKBPmMN