Co-founder @CodePen. Does @CSS. Podcasts @ShopTalkShow. Married @jmm. Clawhammer. loldad.

Bend, OR
Joined February 2007
Chris Coyier retweeted
iOS 15 introduces Drag and Drop between apps to the iPhone. Make sure to give it a try! #iOS15
305
6,750
1,193
21,864
1,203,078
Chris Coyier retweeted
Found a great article on creating responsive grids using minmax() and tried to mix it up with some scoped CSS variables. Pretty clean and flexible😄 codepen.io/NielsVoogt/pen/Ex… via @CodePen
3
23
1
225
Chris Coyier retweeted
Simple @CodePen for the spotlights and highlights #CodePenChallenge. Made with CSS and kisses 😘 codepen.io/hexagoncircle/ful…
3
20
0
164
4,889
Chris Coyier retweeted
Replying to @chaoticgaythey
Watergender Earthgender Firegender Airgender Long ago the four genders lived in harmony. Then everything changed when the firegenders attacked.
7
51
1
462
do you think invisalign transitions are linear or have a more exotic cubic-bezier easing
7
2
0
68
Mmmmm, containnnnner unnnitttsss.
🥳 oh, and also Chrome Canary (with the container query flag) now has support for Query Units: codepen.io/miriamsuzanne/pen… Not sure when it happened - so far I've only tested qi, because that's the most useful. If I may quote @chriscoyier… "CSS comes at you fast"
Show this thread
3
36
5
328
7,977
Chris Coyier retweeted
⭐️ Button @CodePen cdpn.io/BaZJMjv Concept by @edoardomercati 🤝 Created with @greensock & @threejs
9
47
2
481
7,799
Chris Coyier retweeted
This demo is so creative, it made me remember that CodePen has a heart button. (Note that the feature in question is “typically best avoided”: webaim.org/techniques/keyboa….)
Add secret website button codes with vanilla #CSS (NO JS NEEDED!) codepen.io/james0x57/pen/NWj…
1
1
0
15
Chris Coyier retweeted
The Future of CSS: Cascade Layers (CSS @​layer) 🔗 bram.us/2021/09/15/the-futur… 🏷 #cascade #css #layers #specificity
3
109
13
302
Chris Coyier retweeted
Checkout my latest project: an SVG and imagined animation of the Windy Wellington sign! 🌬️ The SVG is something I painstakingly made to match the sign (starting with a Google font called Teko, which was close). Animation made with @greensock Codepen: codepen.io/bcnzer/pen/rNwpNE…
3
3
0
22
GIF
Show this thread
Chris Coyier retweeted
In 2015 my first "picked pen" on Codepen was a simple deck of cards that I used for teaching JavaScript concepts. Ever since, I've revisited the concept using newer tools and techniques. So here's my 2021 take with Petite-vue codepen.io/walpolea/pen/QWgO… via @CodePen
2
2
0
29
Chris Coyier retweeted
This '13.8 billion years ago' demo is made using MeshSurfaceSampler with @threejs 🌎 Watch it live on @CodePencodepen.io/Mamboleoo/pen/MWo… And if you haven't checked it yet, I've published an article on @codrops to show how it works 👀 tympanus.net/codrops/2021/08…
0
18
1
106
4,322
Chris Coyier retweeted
got creative with CSS clip-paths & masks for this week's "spotlight" @CodePen challenge thanks for lookin' codepen.io/cobra_winfrey/ful…
5
16
2
131
GIF
Chris Coyier retweeted
Any creative front end devs have ideas to make something like this easily scalable _and_ animated. CSS vs SVG codepen.io/mds/pen/PojJmPY?e…
8
9
0
128
5,622
Show this thread
because the light was on
7
0
0
169
I've had these tabs open forever so I'm tweetmarking them. 1) XState has a Visualizer now, neat! stately.ai/viz Congrats @statelyai and @DavidKPiano 2) Think expressing state is too verbose? Lucy makes expressing state changes very lightweight. lucylang.org/
7
31
3
273
OoooOOo I really like the idea of setting these all together with a `--brand` color: → html { scrollbar-color & accent-color} → ::marker → ::selection → :focus-visible { outline-color } codepen.io/web-dot-dev/pen/R… @argyleink has even more ideas at web.dev/accent-color/#extra:…
3
31
2
250
Chris Coyier retweeted
Replying to @chriscoyier
It was fixed in github.com/WordPress/gutenbe… Does your theme provide an editor-styles file? If I understood the issue correctly it will only happen when the theme provides no styles at all. It appears we now have to wait until it makes it to core
0
1
0
3