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
RT Dave 🧱
Coded up a small piece of UI this morning with our Web Components in @CodePen, all I needed was one script reference and one CSS import to our framework.
You can even try it for yourself, all our component doc pages come with an "Edit in CodePen" button
Manuel Matuzović: What I like about Web Components is that you have this modern, component-based, reactive approach, but you can use these components in a traditional environment “ordinary HTML documents” without any build step.*
* This may sound naive or obvious, but I'm no JS app pro. :)
RT ycw
textual uniqueness
#codepenchallenge @CodePen
#cassidoonewsletterquestion @cassidoo
https://codepen.io/ycw/full/XWEPYGW
RT Nataliya | Хаотический Зверь
Re Code:
This is done with the box-shadow property.
It's just an effect of the element and you can set multiple effects separated by comma.
The trick is to have one real small square and add multiple not blurred shadows of different colors and offsets.
https://codepen.io/gnykka/pen/NWYLrOW
RT Jon Kantner
Card-Like Menu
https://codepen.io/jkantner/pen/poLOzKY
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
Build, test, and discover front-end code 👩🏽💻