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