@RT Hyperplexed
Liquid effect using only divs!
See it on #codepen:
See more on YT:
https://cdpn.io/abYjPXx
https://www.youtube.com/c/Hyperplexed
RT Jhey 🔨🐻✨
What if your links had a little "sparkle"? ✨
Made with CSS, powered by custom properties 💪
👉
http://codepen.io/jh3y/pen/oNqdmbW
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Create a custom dashed border using a few lines of code.
✅ No extra element
✅ Less than 8 CSS properties
✅ Easy to update using CSS variables
Demo:
#CSS
http://codepen.io/t_afif/full/WNzKJgZ
https://twitter.com/ChallengesCss/status/1557330822801375232
RT Zoë | z-
Next one-liner for #CodePenChallenge creating a RegEx capturing group of any character and then seeing if that group appears again
https://codepen.io/z-/pen/jOzKzbP
RT Brett Schwickerath
JS one-liner to test whether a string contains duplicate characters using the JS Set object.
@CodePen #codepenchallenge #JavaScript
https://codepen.io/schwiiiii/pen/PoRaQGR
RT Maxime Malfilâtre
In the 3 dots loading animation, what does the middle one think about the others ?
I give you the answer with this pure css animation.
Thanks to @CodePen for highlighting my pen in its week's newsletter. It means a lot to me.
The pen :
https://codepen.io/maxew33/pen/MWVVaWE
RT Bence
Manifesting the 800th follower on @CodePen with this pen 🧘
btw the code fits in a tweet, see comment
https://codepen.io/finnhvman/pen/xxWzare
RT Chris 🆚 Browsers
Playing around with new image gallery thing on @CodePen.
https://codepen.io/onion2k/full/rNdvExw
RT Adam Argyle
Re All 24 demos are collected in this @CodePen collection
- basic snapping
- advanced snapping
- snap tips
- snap tricks
https://codepen.io/collection/KpqBGW
RT Chris Coyier
Sir @alexquez and I just recently hit our "Have been running @CodePen for 10 years" milestone.
We teamed up to share our best bits of advice.
https://blog.codepen.io/2022/08/03/379-chris-alex-have-been-running-codepen-for-10-years-what-have-they-learned-heres-the-top-10/
It's week 2 of the August #CodePenChallenge!
This week, our prompt from @cassidoo's newsletter is:
"Write a function that determines if all the characters in a given string are unique"
Thanks @storyblok for sponsoring!
https://codepen.io/challenges/2022/August/2
RT Hyperplexed
Recreating the panning image gallery effect from
Link:
Tutorial:
#codepen
https://palette.supply/
https://cdpn.io/VwXXPKJ
https://youtu.be/GHZBa_R93ag
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Create a grid of images with funny shapes and unexpected hover effect
✅ Minimal HTML code
✅ Less than 20 CSS declaration
✅ Optimized with CSS variables
Demo:
#CSS
http://codepen.io/t_afif/full/gOezMrY
https://twitter.com/ChallengesCss/status/1555515542072705024
RT Chris Coyier
I'm a little obsessed with the idea of previous sibling selectors.
https://codepen.io/chriscoyier/pen/qBoogaX
RT 🐴 Frontend Horse
I feel like this Three.js @CodePen by Kraut GTI would make for an awesome screen-saver. It's so satisfying seeing the marbles light up their little area.
Check it out:
https://codepen.io/krautgti/pen/vYReorP
https://twitter.com/FrontendHorse/status/1555158640612589568
RT Jon Kantner
What if a switch handle moved the opposite way to get to the other side? 😛
https://codepen.io/jkantner/pen/MWVQZjd
RT • nanou •
2020 vs 2022
Pure CSS: Then and now
Code:
Code:
https://codepen.io/antoniasymeonidou/pen/yLOYaeE
https://codepen.io/antoniasymeonidou/pen/qBPoJXB
RT Praveen Puglia
Here's a take on a better PAN number input experience on mobile. Requires tiny amount of JS but feels so good.
The keyboard switches between numeric and alphanumeric using the `inputMode` attribute.
@CodePen #UX
https://codepen.io/praveenpuglia/pen/oNqEzPo
https://twitter.com/praveenpuglia/status/1554358490222968832
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
