@RT Adam Kuhn
go ahead and type some stuff & enjoy these mix-blend-mode animated variable fonts for this week's loooong teeeext @CodePen challenge
https://codepen.io/cobra_winfrey/full/poLpmmd
https://twitter.com/cobra_winfrey/status/1554493467790917632
RT Shaw
CodePen PRO Users: Assets just got some nice improvements. You can now easily bulk download to create backups or bulk delete to clear out unused Assets!
https://blog.codepen.io/2022/07/25/bulk-actions-for-assets/
RT Elissavet 👩🏽💻
August + #javascript Challenges!
This is my take for this week's #CodePenChallenge:
Thank you @CodePen & @storyblok for making this possible! ☺️
https://codepen.io/elisavetTriant/pen/yLKvNYa
RT Jhey 🔨🐻✨
What if your "Launch" button was a little bit... "extra"? 🚀
⚠️ Audio in use!
🛠 Combo of animated CSS && SVG for this one!
👉
http://codepen.io/jh3y/pen/rNOqzbN
RT Steve Gardner
We all talk about how infinitely scrolling websites are often bad for user experience... but we never talk about how it makes the footer feel.
So I made this @CodePen to help shine a light on the footer's never-ending sorrow. 😢
https://codepen.io/ste-vg/full/PoQgvBK
The August #CodePenChallenge starts today!
This month, we'll challenge you with "interview questions" drawn from @cassidoo's weekly newsletter.
Get ready to grow your JS skills as the prompts get harder each week 💪
Thanks @storyblok for sponsoring!
https://codepen.io/challenges/2022/august/1
RT Adam Kuhn
fussin around with some SVG filter combinations & clip paths and wound up with this pixelated penrose triangle that'll prob melt your lappy
thnx for lookin
https://codepen.io/cobra_winfrey/full/GRxMbjM
https://twitter.com/cobra_winfrey/status/1553128818113744897
RT dumpsterfirepatty
✨more css single div magic ✨
🗽
https://codepen.io/pbmasigla/pen/gOeXWOO
RT Bramus
🤔 So, how do closest-side, farthest-side, closest-corner and farthest-corner affect radial gradients?
💡 You could try and read the spec, or you can build a thing to visualise it.
👀 Extra indicators added for clarity.
🔗 Try it on @CodePen:
https://codepen.io/bramus/pen/MWVOXVG
RT Hyperplexed
Recreating the hovercard effect from
Link:
Tutorial:
#codepen
https://kippo.com/chill
https://cdpn.io/zYWdYoo
https://youtu.be/6TYkDy54q4E
RT Grégoire Gaonach 🇪🇺💻
I noticed with surprise that nobody had developed an emoji selector with only Alpine.js and Tailwind CSS.
I have built a minimalist one if that helps anyone.
👉
#emoji #tailwind #alpine #opensource #webdev #buildinpublic
https://codepen.io/cerisegoutpelican/pen/PoROwPV
https://twitter.com/GregoireGaonach/status/1552607250774196226
RT Poonam Soni
CSS Background Pattern 4️⃣
Create Polka Dots Background pattern with:
🌟Only 3 lines of code
🌟No div
Demo
Like and retweet if you find this useful.
Follow for more tips 🙂
https://codepen.io/poonam-adlakha/pen/PoRJeKM
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Create a CSS-only "Back To Top" button with a simple code
✅ 0 JavaScript
✅ Control when the button appears
✅ Smooth scroll on click
✅ Powered by CSS grid and sticky position
Demo:
Full explanation 👉
http://codepen.io/t_afif/full/poLWLJG
http://www.freecodecamp.org/news/css-only-back-to-top-button/
https://twitter.com/ChallengesCss/status/1552253981396799488
RT Jhey 🔨🐻✨
Cascading CSS Text Effects! ✨
– Animate/transition on scroll 📜
– Powered by CSS custom properties 💪
Kinda dig the "Expanding" one, how about you? 🤓
👉
http://codepen.io/jh3y/pen/gOeGmRN
RT ana 🧋
#CodePenChallenge | Glass Marbles 🟣
Finally finished my very first @CodePen challenge submission whoop whoop
https://codepen.io/praxeds/pen/yLKzVBp
RT Bramus
Dug into Motion One’s `scroll` today and must say it’s pretty easy to use (knowing I already have ScrollTimeline experience).
In under 2 hours I converted all my Scroll-Linked Animation demos into Motion One versions.
Check out the collection on @CodePen
Matt Perry: 🚀 Introducing Scroll, Motion One's new scroll-linked animations API!
This mighty 2.5kb function can link Motion One's animate() and timeline() animations to page scroll. Or use a callback to animate canvas, 3D, or anything you can imagine.
Get started:
http://motion.dev/dom/scroll
RT Lee Martin
Finally got to see @NopeMovie and you know I loved all those JAWS nods. Here's the little @CodePen hack I put together for the "☁️" #NopeMovie 🏇🏿🛸🤠🎥🙅🏿♂️🪙🔑🩸🏍🙈🌵🎈
Lee Martin: I was inspired to recreate the ominous cloud and trailing car dealership flag string from @JordanPeele's new film dropping this week, #NopeMovie, as an interactive 2D physics powered visual on @CodePen. ☁️🛸🐎 @nopemovie @monkeypaw
RT Jon Kantner
Made a #CSS (partial SVG) replica of a Dribbble shot, which is a very stretchy cup of coffee. ☕️
⚠️ Works in non-WebKit browsers only since Safari doesn’t support animating `d`.
https://codepen.io/jkantner/pen/Yzaxqzy
RT jake albaugh
Re animating 1k random rectangles with the same packing strategy on @CodePen if you're interested in having fun with it in that context.
https://codepen.io/jakealbaugh/pen/mdxwqag
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
