new year.html

How do you like the codes? What suggestions do you have for them?

CodePen Blog
Chris’ Corner: Freshly-Fallen CSS

First corner of the new year, so, ya know:
✺◟(＾∇＾)◞✺
I feel like we should do CSS for this one. It’s easily my favorite technology thing and basically BFFs with the spirit of CodePen.

In brand-spanking-new news (gnu neues?) the whole “masonry” saga is starting to come to a close. The naming is (drumroll please): .container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } I like it. Lanes. Like you’re playing a driving video game or something. The WebKit gang has the story, and they’ve got demos ready.

Try out Grid Lanes in Safari Technology Preview 234! All of the demos at webkit.org/demos/grid3 have been updated with the new syntax, including other use cases for Grid Lanes.

I’d credit David DeSandro for the name “masonry”, which is certainly a lot more stuck in people’s heads. He’s understandably disappointed in the new name. I can’t get past the idea that a brick wall (the “masonry” connection) doesn’t look like this looks (it’s wrong by 90 degrees). So color me a fan of the new naming.

In the “I had no idea this was coming” category is text-grow and text-shrink. I’ve probably used Dave Rupert’s (ancient) fittext more times than I can count in my career. First, viewport units kinda obsoleted it, but that required magic numbers to get just right. Now it’s going to… just work? Although I think it’s just a prototype so far. (via Adam) h1 { text-grow: per-line scale; } https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-01-at-13.31.33.gif

And another entry in the “I had no idea this was coming” is scroll-triggered animations. I’m very aware of scroll-driven animations and find that whole API extremely cool, but this is something else. Normally when you apply an animation it just runs immediately when the page loads, possibly with a manual delay. With the driven animations you can attach it to a timeline based on the scroll progress of an element or the position related to the viewport. With this, you can also have it triggered instead. A trigger is a custom ident like: animation: my-animation 0.5s; animation-trigger: --thing-in-view play-forwards;
Then you create that trigger: timeline-trigger-name: --thing-in-view; timeline-trigger-source: view();
Which could be the same or a different element. Cool. I obviously love that there is a bunch of demos in a Collection.

I was aware of (newly) customizable selects and I’ve had my own plays with it, but Brecht De Ruyte is the master. I’ll link up part 4 of his so-far-five-part series on the matter. This is what’s happening: https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-02-at-05.04.24.gif Like: whaaaaat. But I suppose I could have guessed. At one time CSS gave us a :checked selector and HTML has labels-connected-to-inputs and people used those things to build absolutely amazing things. There is much more interactivity on offer in a

Do you know tangram game?

👨‍💻 Programmer, I think you should try this once.

I found a platform where you can post code 🧩, share projects 🚀, and connect with other developers 🤝.

People here actually discuss real tech, real problems, and real solutions — not random stuff.

👉 My favourite part: you earn from your content 💰
Just post one image, a code snippet, a tip, or any coding project — and you get rewarded.

I’m personally earning $2–$5 daily, and this is not clickbait.

🎁 Bonus:
If you join using my link, you’ll get $1 instantly.

Worth checking once 👇
https://bit.ly/4pIinck

shared_file

CodePen Blog
Chris’ Corner: Type

Jake Archibald writes that we should just not use footnotes on the web. Not use footnotes?! I love a good footnote. Or at least, I thought I did. It’s where you can stick some information that provides a bit of extra context, but would be distracting if smashed into the main text. They can even change the tone, like how you can insert a joke where it might not work otherwise.

But it would be hard to read Jake’s full-throated argument against them on the web. They really do jostle you around the page awkwardly, simply because of the nature of the web and typical designs. Jake’s “just use some damn parentheses” is slightly tongue-in-cheek but not without merit.

Personally, I like the ideas that take more advantage of the unique powers of the web. Specifically the alternative that is:

1. An

opened/closed entirely with HTML attributes.
2. Positioned with anchor positioning
https://blog.codepen.io/wp-content/uploads/2026/01/Screenshot-2026-01-14-at-10.32.20-AM-1024x252.png
Color me a fan. Tooltips are the perfect use case for this technology combo. And a footnote can totally be a tooltip, as can a menu. Sidenotes are nice too, if a design can pull it off.

While we’re doing type stuff, Kelly Choyce-Dwan’s deep dive into balancing type across languages is excellent: Typography troubles: Balancing lines in Japanese & Korean. I’m perfectly guilty of looking at new CSS tech through the lens of setting type in English and getting excited before understanding the non-English ramifications.

In this case, as nice as text-wrap: balance can be sometimes…

When working with multilingual text, line breaks don’t always behave as expected. For example, we added text-wrap: balance on WordPress.org, and quickly got community feedback that it led to awkward, unexpected breaks in Japanese and Korean.

Which, yay, has a fancy solution using an auto-phrase value I’ve literally never heard of:
h1, h2, h3, h4, h5, h6 { text-wrap: balance;

&:lang(ja) { text-wrap: initial;

@supports (word-break: auto-phrase) {
word-break: auto-phrase; text-wrap: balance;
}
}
}
Make sure to click over to the article for the Korean fix.

Have you heard of “faux bold”? Or “faux italic”? It’s this (kinda nasty) thing a browser will do to characters in type when you’ve asked for the bold or italic version of a font, but you haven’t actually loaded that font. So the browser is like fine I’ll just do it for you then and it, without exception, looks like 💩.

The solution, if you’re loading up custom fonts, is to ensure you’ve got an @font-face rule that covers those font-weight and font-styles before using them. Richard Rutter has a good blog post on this, which includes a nifty trick for detecting if you’re accidentally doing it wrong.
@keyframes flip-synthesis {
0% { font-synthesis: none; }
100% { font-synthesis: initial; }
} body { animation: 3s infinite flip-synthesis;
}

🎯 Learn DSA Visually (No Boring Theory)

Struggling with DSA?
That’s because it’s usually taught with too much text.

Here are 3 websites that explain DSA using visuals & animations 👀

🔹 visualgo.net
🔹 csvistool.com
🔹 clementmihailescu.github.io/Pathfinding-Visualizer/

If DSA never made sense before,
this will help a lot 🚀

❤️ React for more useful resources

No Javascript. No images. Just conic-gradient math.
This creates a premium, rotating neon border effect for your next project.
👇 Copy Code:

<style>
  body{background:#000;margin:0;height:100vh;display:flex;justify-content:center;align-items:center;font-family:sans-serif}
  
  /* The container holding the spinning glow */
  .card{position:relative;padding:2px;width:300px;border-radius:12px;background:radial-gradient(#1a1a1a,#000);overflow:hidden;z-index:1}
  
  /* The spinning border logic */
  .card::before{content:'';position:absolute;width:150%;height:150%;background:conic-gradient(transparent,transparent,transparent,#00f2ff);animation:spin 3s linear infinite;top:-25%;left:-25%;z-index:-2}
  
  /* Inner dark box to mask the center, creating the border effect */
  .card::after{content:'';position:absolute;background:#000;width:100%;height:100%;border-radius:11px;z-index:-1}
  
  /* Content styling */
  .content{position:relative;color:#fff;text-align:center;padding:20px;z-index:2;display:flex;flex-direction:column;gap:10px}
  .btn{background:#00f2ff;border:none;padding:10px;border-radius:4px;font-weight:bold;color:#000;cursor:pointer}
  
  @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>

<div class="card">
  <div class="content">
    <h2>Infinite Access</h2>
    <p style="font-size:12px;color:#666">Secure Connection Protocol</p>
    <button class="btn">CONNECT</button>
  </div>
</div>

#CSS #Animation #Design #UI #Snippet

Creating 3D objects usually requires WebGL or Three.js.

But for simple UI elements, you can build a fully rotating holographic cube using only:

transform-style: preserve-3d

Clean. Fast. No libraries.

👇 Copy Code:

<style>
  body{margin:0;height:100vh;background:#050505;display:flex;align-items:center;justify-content:center;perspective:800px}
  
  .cube{width:100px;height:100px;position:relative;transform-style:preserve-3d;animation:spin 6s infinite linear}
  
  .face{position:absolute;width:100px;height:100px;border:2px solid rgba(0,242,255,0.5);background:rgba(0,242,255,0.05);display:flex;align-items:center;justify-content:center;color:#00f2ff;font-size:12px;font-family:sans-serif;box-shadow:0 0 15px rgba(0,242,255,0.2)}
  
  /* Positioning the 6 faces */
  .front{transform:translateZ(50px)}
  .back{transform:rotateY(180deg) translateZ(50px)}
  .right{transform:rotateY(90deg) translateZ(50px)}
  .left{transform:rotateY(-90deg) translateZ(50px)}
  .top{transform:rotateX(90deg) translateZ(50px)}
  .bottom{transform:rotateX(-90deg) translateZ(50px)}
  
  @keyframes spin{0%{transform:rotateX(0deg) rotateY(0deg)}100%{transform:rotateX(360deg) rotateY(360deg)}}
</style>

<div class="cube">
  <div class="face front">FRONT</div>
  <div class="face back">BACK</div>
  <div class="face right">RIGHT</div>
  <div class="face left">LEFT</div>
  <div class="face top">TOP</div>
  <div class="face bottom">BTM</div>
</div>

#CSS3D #WebDesign #Frontend #Snippet