@RT Josh Collinsworth
Dev humor alignment chart
(From this CodePen:
https://codepen.io/collinsworth/pen/QWmPjOv
https://twitter.com/jjcollinsworth/status/1562462657692971009
RT Jen Simmons
Re That’s it! That’s all the code that’s needed. Take a look at the entirety of HTML & CSS at:
And read the full article on :has() at
https://codepen.io/jensimmons/pen/bGoMydw?editors=1100
https://webkit.org/blog/13096/css-has-pseudo-class/
RT Zoë | z-
I created an additional entry for #CodePenChallenge using RegEx, as I have done for the previous 3 weeks
(I included the code I used to generate the object for the RegEx which was mostly a copy and paste from my serious entry)
https://codepen.io/z-/pen/eYMXjLL?editors=0010
RT Chris Coyier
Heyyy. That's the 300𝓉𝒽 @CodePen Spark ✨ newsletter that just went out.
Milestones are fun.
https://codepen.io/spark/300
RT Jon Kantner
Triple Venn Diagram Dots
https://codepen.io/jkantner/pen/gOeEZWG
RT Morten Rand-Hendriksen
The web platform is evolving so fast right now. This is so cool! What a great time to work on the web.
Top Layer vs z-index: 10000
https://codepen.io/web-dot-dev/pen/MWVxmKK
RT Amit Sheen
I really liked this month's @CodePen challenges, prompt from @cassidoo's newsletter, and it's the last week, so I thought I'd make this one a little more visual...
Live demo:
https://codepen.io/amit_sheen/full/abYMGdo
RT Brett Schwickerath
Codepen Challenge!! Starting from q on a normal "qwerty" keyboard grid, accept a string and output the path needed to spell that string.
✨Added support for SHIFT + horiz/vert toggle✨
@CodePen #JavaScript #codepenchallenge
https://codepen.io/schwiiiii/pen/wvmOmWW
RT 🐴 Frontend Horse
Check out this fun visualizer for the new Roboto Flex variable font.
@robdimarzo mapped properties to different corners in this awesome @CodePen.
This font is so versatile it puts 30 other fonts out of work.
https://twitter.com/FrontendHorse/status/1561350924970459136
Ready for your next #CodePenChallenge?
Our final prompt from @cassidoo's newsletter is out today!
Let's move around a QWERTY keyboard with a remote control 🕹
Thanks @sourcegraph for sponsoring!
https://codepen.io/challenges/2022/august/4
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Build an expanding image panels with Zig-Zag edges
✅ Minimal HTML
✅ Works with any number of images
✅ Optimized with CSS variables
Demos via @CodePen
- Flexbox:
- Grid:
Full explanation 👉
http://codepen.io/t_afif/full/xxWBLQR
http://codepen.io/t_afif/full/wvmrbje
http://css-tricks.com/css-grid-and-custom-shapes-part-2
https://twitter.com/ChallengesCss/status/1561717663965093889
RT Noah Liebman (@noleli)
It occurred to me that you can use the @greensock GSAP MotionPathPlugin’s `getPositionOnPath()` method to help draw a gradient along a path. It’s not just for animation anymore!
https://codepen.io/noleli/pen/qBogWqy
RT Jen Simmons
After working for months on an epic article about the new `:has()` pseudo-class and how it can be combined with other CSS selectors to a powerful effect — we published it yesterday! There are so many great use cases that now no longer require JavaScript.
https://webkit.org/blog/13096/css-has-pseudo-class/
RT Jon Kantner
Animated Star Rating
https://codepen.io/jkantner/pen/BarvVNa
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Create a Speech Bubble using a few lines of code
✅ One element
✅ No pseudo-element
✅ Only 3 properties
✅ Optimized with CSS variables
Demo:
#CSS
http://codepen.io/t_afif/full/eYMbrJN
https://twitter.com/ChallengesCss/status/1560221299527614465
RT Danielle Smith 🏳️⚧️ 🇿🇦
Feeling nostalgic?
https://codepen.io/danini-the-panini/pen/mdxqzoE
https://twitter.com/daninithepan1ni/status/1560289851102138370
RT Jennifer Daniel
Noto Emoj featured in the latest @CodePen Spark ⚡️
I love seeing how people are using Noto (Note to self: transfer my newsletter somewhere else so I can emebd it on my blog!!!)
Thanks for sharing! 🙏
Jennifer Daniel: We did it, fam!!!!! Our monochrome emoji font is here and FREE (🆓!) for all your (including but not limited to) printed matter 📖, eink reader 📟, tattoo 💪🖋️, coloring book 🖍️, engraving 🔡, laser cutting 🎨, word processing 📝, web dev 💻 needs🖤🤍
https://fonts.google.com/noto/specimen/Noto+Emoji
https://twitter.com/jenniferdaniel/status/1560271353369882624
RT Brecht
Had some fun using the has() relational pseudo-class which is supported in Chrome. Created a little @CodePen from it
https://codepen.io/utilitybend/pen/bGvjLba?editors=1100
RT GreenSock
Re 🏆 So here's the challenge!
Make a demo using matchMedia, share it on twitter and tag us @greensock
The MOST CREATIVE one wins a Club GreenSock subscription, with access to ALL our bonus plugins like ScrollSmoother & MorphSVG 🥳
Start here, go go go!
http://codepen.io/GreenSock/pen/vYRvVvY
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
