CodePen.IO (@codepen) 's Twitter Profile
CodePen.IO

@codepen

Build, test, and discover front-end code 💻

Support: codepen.io/support

ID: 517021184

linkhttps://codepen.io calendar_today06-03-2012 23:58:57

20,20K Tweet

200,200K Takipçi

2,2K Takip Edilen

Adam Argyle (@argyleink) 's Twitter Profile Photo

simple, effective, light and dark component contexts with color-scheme and light-dark() try on Codepen codepen.io/argyleink/pen/…

simple, effective, light and dark component contexts with color-scheme and light-dark()

try on Codepen
codepen.io/argyleink/pen/…
Maciek Fitzner (@fitzmack) 's Twitter Profile Photo

I made a 3D #css-only landscape of sand dunes - a view mesmerizing whether it's day or night. Live demo on CodePen.IO : codepen.io/MackFitz/pen/X… But careful watching it on Chrome, the desert might scorch your CPU - & fire foxes don't bite

CodePen.IO (@codepen) 's Twitter Profile Photo

It's the final week of the Fractals #CodePenChallenge! This week, we go freestyle 🌀❄️🐚 codepen.io/challenges/202…

It's the final week of the Fractals #CodePenChallenge!
This week, we go freestyle 🌀❄️🐚
codepen.io/challenges/202…
Una 🇺🇦 (@una) 's Twitter Profile Photo

Now with dynamic auto-width using calc-size()! Enabling the animation of elements to auto height and width is planned for Chrome 129 🥳 (stable rollout starts in 2 weeks!) More content to come around this feature from our team soon 🙂

Ana Tudor 🐯🖤🌻 (@anatudor) 's Twitter Profile Photo

Here's a little fun #noJS challenge: how would you code this? Background behind heading is transparent and cutout with rounded corners depends on text heading length. My solution on CodePen.IO: codepen.io/thebabydino/pe… Can you guess how I did it before checking the code? 😼

T. Afif @ CSS Challenges (@challengescss) 's Twitter Profile Photo

💡 CSS Tip! Create an inner curve/notch shape using CSS mask and a few lines of code ✅ Only one element ✅ No pseudo-element ✅ Works with gradients & images ✅ Optimized with CSS variables Demo: codepen.io/t_afif/full/oN… via CodePen.IO

💡 CSS Tip!

Create an inner curve/notch shape using CSS mask and a few lines of code
✅ Only one element
✅ No pseudo-element
✅ Works with gradients & images
✅ Optimized with CSS variables

Demo: codepen.io/t_afif/full/oN… via <a href="/CodePen/">CodePen.IO</a>
Kiran Patel (@pate1kiran) 's Twitter Profile Photo

Always wanted more delightful signing experiences on the web—so I created one that draws out your name✍🏼 Play w it here - codepen.io/kiranpate1/ful…

Ksenia Kondrashova (@uuuuuulala) 's Twitter Profile Photo

I don't use #d3js that much these days, but d3-force-layout has a special place in my heart haha I mean, look at this cutie! And the code behind it is super easy to understand Live demo & source code: codepen.io/ksenia-k/pen/B… Hosted on CodePen.IO Made with #d3 D3.js

CodePen.IO (@codepen) 's Twitter Profile Photo

The September #CodePenChallenge begins! We're kicking things off with a game of Rock, Paper, Scissors ✊✋✌️ codepen.io/challenges/202… Thanks MongoDB for sponsoring! srv.buysellads.com/ads/long/x/THH…

Ana Tudor 🐯🖤🌻 (@anatudor) 's Twitter Profile Photo

A ✨cool ✨ little thing I made: no text duplication outline wave 🌊 shadow codepen.io/thebabydino/pe… 1 `div` + #SVG `filter` taking care of creating the outline version, tiling and distorting it. Chrome only. Firefox 🪲 bugzilla.mozilla.org/show_bug.cgi?i… Safari 🪲 bugs.webkit.org/show_bug.cgi?i…

A ✨cool ✨ little thing I made: no text duplication outline wave 🌊 shadow codepen.io/thebabydino/pe…

1 `div` + #SVG `filter` taking care of creating the outline version, tiling and distorting it.

Chrome only.

Firefox 🪲 bugzilla.mozilla.org/show_bug.cgi?i…
Safari 🪲 bugs.webkit.org/show_bug.cgi?i…
CodePen.IO (@codepen) 's Twitter Profile Photo

Bug reports are often in the form of screenshots or screen recordings. That's a good start! What if those things *automatically* came with a ton of extra useful metadata and context? All the browser information. The console and network activity. And more, like anything custom

Bug reports are often in the form of screenshots or screen recordings. 

That's a good start!

What if those things *automatically* came with a ton of extra useful metadata and context? All the browser information. The console and network activity. And more, like anything custom