@It's week two of the April #CodePenChallenge!
Let's focus on the little details in a photo gallery 📸
Thanks @memberful for sponsoring!
https://codepen.io/challenges/2022/april/2
RT Louis Hoebregts
End of the week animation ✨🗺
Topographic map of a random region in France exported from Maperitive to SVG and animated in a #canvas using @p5xjs & @greensock ⚡
https://codepen.io/Mamboleoo/pen/KKZRvEp
RT Mark Boots 🇺🇦🌻
For this weeks @CodePen Challenge I created a generative memo board with a fun little animation
➡️
#codepenchallenge
https://codepen.io/MarkBoots/pen/JjMvKRg
RT Manz 🇮🇨⚡👾
The Office DVD ScreenSaver meme with Javascript
👀@CodePen
🎬Live making-of:
😼Repo
🐈GitHub
⚡More:
http://codepen.io/manz/pen/oNpqYER
https://youtu.be/PmAQdTdglCo
http://github.com/manzdev/twitch-dvd-screensaver
http://manzdev.github.io/twitch-dvd-screensaver
https://manz.dev/streams
RT Jhey 🔨🐻✨
"Think outside the box ✨"
Pure CSS toggle created with the Houdini Properties and Values API 🚀
The joy of this approach is being able to choreograph separate transition delays for parts of a transform 🤓 (Next tweet explains 👇)
👉
http://codepen.io/jh3y/pen/BaJYYjK
RT Amit Sheen
You know how each task has its small notes and Little Details?! so for this week #CodePenChallenge, I added these Little Details to a small popup with some simple CSS.
Live demo @CodePen:
https://codepen.io/amit_sheen/full/ExooBLg
RT @aaroniker_me: High Five ✋
@CodePen
Created with @greensock
https://cdpn.io/gOoGejN
RT @jonkantner: Light/Dark Toggle With Morphing Icon
https://codepen.io/jkantner/pen/eYygqJm
RT Michelle Barker
Little demo using the `:has()` pseudo-class for a product grid, currently only in Safari. Too bad Safari doesn’t support animated grid tracks, otherwise this would be 100% pure CSS – I’m polyfilling with @greensock for now
https://codepen.io/michellebarker/pen/vYpdEgQ
RT Ana Tudor 🐯🖤🌻
#tinyCSStip Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?
Well, `@supports selector()` to the rescue!
@CodePen test:
https://codepen.io/thebabydino/pen/WNdEvzq
RT Jon Kantner
Thought I should try SVG animations for checkboxes including an indeterminate state.
https://codepen.io/jkantner/pen/BaJmyjo
RT Brian Haferkamp
New Video! 🥳
Create a Hero Section with Animated Text
This is not that difficult and adds 🪄 to your #website. Video is packed with tips for your #webdevelopment journey :-)
Code on @CodePen:
#webdesign #webdev #css
https://youtu.be/iX75XunOfDw
https://codepen.io/brianhaferkamp/pen/vYppgba
https://twitter.com/BrianHaferkamp/status/1510970750219526147
The April #CodePenChallenge starts now!
This month is all about Little Details 💎
We're kicking it off with list styles
Thanks @memberful for sponsoring!
https://codepen.io/challenges/2022/april/1
RT Amit Sheen
3D Floating Headers.
(Made for the Huge Headers #CodePenChallenge)
Full code @CodePen:
https://codepen.io/amit_sheen/pen/BaJmWWj
RT S. Shahriar thinks you are awesome 😊 so he
If we can have n-gon shapes, we can have n-gon pyramids too! We only need to calculate the slant height and angle 😉
So, I coded a 3D Pyramid with SCSS
Try it on @CodePen:
(drag to rotate, double-click to animate the rotation)
S. Shahriar thinks you are awesome 😊 so he: 20 lines of PUG, ~80 lines of SCSS, and you gift yourself a good-looking CSS 3D pentagon. Sweet, right? 😄
Psst! n= 42 makes a cylinder/disc 😆
Full code on @CodePen:
Yep, it was fun!
https://codepen.io/ShadowShahriar/pen/vYepQNa
https://twitter.com/ShadowShahriar/status/1509920900941971461
RT Adam Argyle
Had a play with Open Props yet?
Here's a starter with the props, the normalize and the buttons ready for your next demo 🙂
dark theme shown, but has an automatic light/dark theme built in!
https://codepen.io/argyleink/pen/OJzxeZe
RT Aaron Iker
High Five ✋
@CodePen
Created with @greensock
https://cdpn.io/gOoGejN
RT Jhey 🔨🐻✨
Re Or how about sine wave inputs? 🌊
Again, CSS accent-color at play ✨
👉
http://codepen.io/jh3y/pen/RwxZMYX
RT una.css 👩🏻💻🇺🇦
Did you catch that the dialog element became stable in all modern browser engines this month? 🎉
Here's a quick walkthrough video & demo to play with:
Webkit blog:
MDN docs:
https://codepen.io/una/pen/dyJRwvG
https://webkit.org/blog/12209/introducing-the-dialog-element/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
RT 小山最中
ドロネー図の三角形をcurveVertex()で描いてみる。
#019 Handwritten Delaunay Diagram
#creativecoding #generative #p5js
https://codepen.io/koyamamonaka/pen/LYeLmEP
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
