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

✨ RARE COSMIC EXPLOSION IN 2026! 🚀

Get ready! A rare "Nova" explosion of the star T Coronae Borealis is expected to happen sometime in 2026.

🌟 Key details:
Visibility: It will be visible to the naked eye (no telescope needed!).
Brightness: It will shine as bright as the North Star for several days.
Rare Event: This only happens once every 80 years!

Don't miss this once-in-a-lifetime show in the night sky! 🌌

#Astronomy #Space2026 #Nova #StarWatch

CodePen Blog
Chris’ Corner: Two Liners

The real reason that fancy modern CSS is exciting is because of what we can now actually do in CSS.

I remember one of my favorite dudes Hakim El Hattab made a thing called “Progress Nav” ten years ago. The idea is a Table of Contents component that could tell where you are scrolled in the page and reflects that in the design of the ToC.
https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-15-at-11.59.21.gif
Perhaps you won’t be surprised that functionality works via JavaScript. It’s not horridly huge or complex, but, it does rely on totally-not-even-debounced window.addEventListener( 'scroll', ... which is known to be a cause of janky performance.

But it’s cool, right?!

This kind of thing has been come to be known as a “scroll spy” effect. I’m sure you can see where I’m going with this: CSS can do scroll spy now. In Chrome anyway. Remember when all that CSS carousel stuff was happening? This is highly related. I remember people gently trying to say this isn’t just CSS carousels, it’s interesting CSS primitives that combined can make a carousel, but totally have other users too. Well, here’s something.

Una’s blog post is a live demo of it working.
https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-15-at-13.13.59.gif
Here’s the main CSS that does it:
.parent { scroll-target-group: auto; } :target-current { /* styles for active anchor */ }
Wow.

It’s also obviously ultra important that we can do Battlestar Galactica corners, as Dave explains:

… the sci-fi film and television trope where all rectangles (doors, windows, furniture, user-interfaces) have one to three angular corners instead of all corners being the old, boring, un-futuristic 90º rectangle corners. They are the cooler version of rectangles by all accounts.

Another two-liner 😍:
.sci-fi { border-start-end-radius: 50px; corner-shape: bevel;
}
https://blog.codepen.io/wp-content/uploads/2026/01/Screenshot-2026-01-15-at-3.25.41-PM-1024x471.png

You know when an element moves when View Transitions are used? They say “they aren’t screenshots” used during the moving/morphing… but… they kinda feel like they are screenshots. And so, sometimes it looks awkward. Bramus notes that an example of this is when an element has a different border-radius. Fixing this is more complicated than I’d like it to be and showcases how sometimes these fancy features require a pretty deep dive once you get into the details. The good news is there is a (slightly) simpler approach, which requires thinking about the individual parts you are actually animating. That part, thankfully, makes sense to me. Like giving the element itself and the guts of it different names:
.card { view-transition-name: card;
} .card > .card-content { view-transition-name: card-content;
}
I’ll leave you with a beast of a Julia Micocene blog post about lighting in 3D CSS.

Stop using flat colors for your headers.

Use background-clip: text to create a flowing, animated gradient fill. It adds an instant layer of polish to any landing page.

👇 Copy Code:

<style>
  body{background:#000;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;font-family:sans-serif}
  
  .liquid-text{
    font-size:5rem;font-weight:900;text-transform:uppercase;
    background:linear-gradient(to right,#00f2ff,#ff009c,#00f2ff);
    background-size:200% auto;
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    animation:shine 3s linear infinite;
    filter:drop-shadow(0 0 15px rgba(0,242,255,0.3))
  }
  
  @keyframes shine{to{background-position:200% center}}
</style>

<div class="liquid-text">CYBER</div>

#CSS #Typography #Design #Frontend #Snippet

CodePen Blog
Chris’ Corner: Type

Have you seen Kiel Danger Mutschelknaus’ Space Type Generator? This thing is absolute monster of amazing text-on effects. Bought a coffee for this beautiful bit of work for sure.

The effect you see when landing on that homepage is extremely cool. Playing around with the sliders and presets make for almost entirely different demos, each more amazing than the last. https://blog.codepen.io/wp-content/uploads/2026/01/hoops-620x1024.png But don’t miss the Select… menu in the upper right which has another ~20 effects (!!!). If you’re like me, each new one you open is the new best one. https://blog.codepen.io/wp-content/uploads/2026/01/codepen-rules-1024x516.png Well fine now that we’re doing type, I gotta empty my pockets with cool type I’ve saved lately. Swiss Cheese Mono

I like that the font was made by hand, but then… “After taking some photos of real cheese, playing around with Adobe Firefly’s generative AI image tools” you can make it look like, ya know, real Swiss Cheese. https://blog.codepen.io/wp-content/uploads/2026/01/Slide2-819x1024.webp https://blog.codepen.io/wp-content/uploads/2026/01/SwissCheeseMonooncuttingboard-1024x1024.webp Fran Sans

This is a great story to go along with a great font. I love it when people get the bug on something, and other people pop in to give them the right tools and ideas at the right time to complete the journey. https://blog.codepen.io/wp-content/uploads/2026/01/Screenshot-2026-01-18-at-4.22.47-PM-1024x662.png Shop Sans

Ya know, I don’t believe I’ve ever met a font with this express purpose.

Shop Sans is a typeface for setting text on circles and curved text paths. Its ‘Curve’ variable font enables adjustments to optimize details for bending type smoothly with an adjustable radius. https://blog.codepen.io/wp-content/uploads/2026/01/large_Shop_Sans_Curve-1024x1024.png Miles To Go

I’m almost annoyed with this font because I think I “liked” it on Instagram and it now the image below follows me to the ends of the Earth. But it’s just so fun! And it’s only $17! https://blog.codepen.io/wp-content/uploads/2026/01/1_0ad1c01d-1d26-49a1-9978-504470b8eaef.webp Clauthbound

Another new one from Dan Cederholm, also very affordable. https://blog.codepen.io/wp-content/uploads/2026/01/clauth-gold-cm-1-1024x683.png I’ll leave you with Tobias Frere-Jones’ account of the typeface Gotham. I put Gotham on a pedestal in my mind somehow. It’s the the ultimate modern very good typeface. It’s popular, but not so popular I ever got sick of it. It’s just an absolute workhorse that when it works, it’s perfect (like in Obama’s campaign). I still associate the font with “Hoefler & Frere-Jones” in my mind, but that partnership is long over, and the font stayed with the company “Hoefler & Co”, which still exists I guess but is now part of Monotype. I like that Tobias wants to make sure the story has a proper URL.

As these families are now further removed from their origin, I want to ensure that their stories are accurately recorded.

Tiktok clone
➡️ Live demo