CodePen.IO 
@CodePen@hello.2heng.xin
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
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
RT Zoë | z-
This week's #CodePenChallenge I tried to make it a single regex expression using the capture group match expression `(?1)` but swap out `%` and `#` for different characters but couldn't quite figure it. So solved recursively.
https://codepen.io/z-/pen/rNdQYeg
RT Michelle Barker
Still the best @CodePen ever
https://codepen.io/chriscoyier/pen/AwVNjg
RT Hyperplexed
Theme Picker in 1 minute with 1 line of js?!
#codepen:
See more on YT:
https://cdpn.io/VwXEXbW
https://www.youtube.com/c/Hyperplexed
RT Smashing Magazine 🇺🇦 🏳️🌈
Didn't know that. Actually, the San Francisco Typeface Does Ship as a Variable Font, so we can use it quite extensively. via @chriscoyier
CodePen demo:
https://codepen.io/chriscoyier/pen/RwMQYyQ
https://chriscoyier.net/2022/08/02/actually-the-san-francisco-typeface-does-ship-as-a-variable-font/
RT Nicolas Steenhout
I put together a quick CodePen to illustrate why using positive tabindex values sucks for keyboard users.
Feedback welcome!
#a11y
https://codepen.io/vavroom/live/bGvxZYZ
RT R0dzy 🇺🇦
One line solution for "Equal with Deletions"
#codepenchallenge #JavaScript
https://codepen.io/rodzyk/pen/jOzQLvr
RT @learosema
Learned something new about the #svg path API: there's a ready-to-use method to determine if a point is inside a fill of a path element: isPointInFill
via @CodePen
https://codepen.io/learosema/pen/VwXEoKB?editors=1010
RT Manuel Matuzović
I've created a simple CodePen to illustrate and understand the difference between physical vs. logical properties. It might help you, too.
https://codepen.io/matuzo/pen/zYWmemQ?editors=1100
RT Brett Schwickerath
Codepen Challenge!! Use specific characters as deletion flags mid-string. Should even support deletion of delete flags! 😁
@CodePen #codepenchallenge #JavaScript
http://codepen.io/schwiiiii/pen/oNqQvaX
RT AdirCode
Made a custom kind of tooltip for a client project, I’m not sure if it’s even considered a tooltip, even though functionally it’s the same, what do you think?
Here’s my @CodePen:
https://codepen.io/Adir-SL/pen/VwXGPmy
RT Johan Karlsson
🔳🔲 Binary Pattern on @CodePen:
You know the drill: click to generate a new random pattern!
Some bit fiddling with: AND, OR, XOR
#generative #creativecoding
https://codepen.io/DonKarlssonSan/full/jOzvvwy
https://twitter.com/DonKarlssonSan/status/1558775186966683648
RT T. Afif @ CSS Challenges
Demo:
#CSS
T. Afif @ CSS Challenges: 👌 CSS Tip!
Create a fancy pattern using a few gradients and CSS variables.
Demo:
More CSS patterns 👉
#CSS
http://codepen.io/t_afif/full/zYWJedQ
http://github.com/Afif13/CSS-Pattern
https://twitter.com/ChallengesCss/status/1558549916653338625
RT Jhey 🔨🐻✨
Yeah, CSS is pretty cool...
👉
http://codepen.io/jh3y/pen/eYMPmJW
RT Adam Kuhn
put a lil spin on an old pen toying with svg filters + animations (w/ some bonus image & mix-blend options peppered in) for some rather trippy effects that'll make your gpu weep
https://codepen.io/cobra_winfrey/full/ZExMPKG
https://twitter.com/cobra_winfrey/status/1559210534704128001
New week, new #CodePenChallenge!
August's coding challenge continues with a new prompt from @cassidoo's newsletter!
Thanks @storyblok for sponsoring!
https://codepen.io/challenges/2022/august/3
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
