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

🌀 New CSS Loader: "Neon Orbit"
Simple, modern, and smooth.

HTML

<div class="loader" aria-label="Loading">

<span></span><span></span><span></span>
</div>

CSS

.loader{

width:56px;height:56px;
position:relative;
filter:drop-shadow(0 0 10px #00e5ff);
}
.loader span{
position:absolute;inset:0;
border-radius:50%;
border:3px solid transparent;
border-top-color:#00e5ff;
animation:spin 1s linear infinite;
}
.loader span:nth-child(2){
inset:10px;
border-top-color:#a855f7;
animation-duration:.85s;
animation-direction:reverse;
}
.loader span:nth-child(3){
inset:20px;
border-top-color:#22c55e;
animation-duration:1.15s;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* optional: center on page */
body{margin:0;min-height:100vh;display:grid;place-items:center;background:#0b1220}

Tip: Change colors or inset values to create new variants.

#css #loader #animation #fron

CodePen Blog
Chris’ Corner: Lovingly Esoteric CSS

Can you reason out the difference between a selector doing :has(:not) vs :not(:has)? Kilian Valkhof wrote up that post I just linked to. I like how he teaches the way to think it out is to write out all the implied selectors at work. For instance: .card:has(:not(img)) {} .card:not(:has(img)) {}
is really: .card:has(*:not(img)) {} .card:not(.card:has(img)) {}
The latter becomes a lot more clear to me:

1. Select all the stuff in a .card that isn’t an img.
2. Select the card as long as it doesn’t contain an img.

Super different. I love stuff like this. Like Sudoku puzzles for CSS nerds.

Speaking of :has(), Heydon gets a bit philosophical with a “Sidebar” layout, explaining how it can get a lot more flexible when we think of how to handle it with any particular layout that just so happens to have a sidebar. And just so happens is a specialty of :has(), polished up with a nice dollop of @container.

I didn’t know this was coming, but I love it, and it makes intuitive sense to me. Una explains in Range Syntax for Style Queries. /* Range query for rain percent (new) */ @container style(--rain-percent > 45%) { .weather-card { background: linear-gradient(140deg, skyblue, lightblue);
}
}
My brain goes right now how line-height often needs to get sucked in when the font-size goes up. So assuming those are custom properties powered, something like this could be cool: @container style(--font-size > 2rem) { line-height: 1;
}
But my enthusiasm is tempered by the fact that you can’t do a container query on the same element you set the custom property on. So like this doesn’t work: h1, h2, h3 { font-size: var(--header-font-size, 1.5rem);
@container style(--header-font-size > 2rem) { line-height: 1;
}
} h1 { --header-font-size: 3rem;
}
You can see what I mean here with a working version.

Because I’m setting --header-font-size at the same “level” as I’m testing it with @container it just doesn’t work. It would have to be set at least one DOM level higher, which is probably not what I’d be doing on an element like this. Oh well, it’s still cool.

I appreciate Roma Komarov’s obsessing about a tiny detail here. This website Ink & Switch has these kinda rough hand-drawn underlines on it. But when they wrap the wrapping edge is “hard cut”. But it needn’t be so. The CSS property box-decoration-break: clone fixes it entirely. Beautiful. You can kinda forgive someone not knowing this as the browser support isn’t perfect. And more, the fact that it starts with box- kinda makes you think it’s gonna be related to box-shadow but really it’s (get this): border-radius, border-image, box-shadow, and background. That’s some good bar trivia right there for you and all your CSS buds.

My toxic trait is that I like to declare winners of things. Like how Apple won with grid-lanes 😬. Or how oklch() is the winning modern color format. Instead of giving those topics the nuance they deserve. I also have a lot of muscle memory for just using rem units everywhere, considering them the winning unit. But that one is almost certainly too narrow of an opinion. In fact, it’s probably not any one particular unit, but as Miriam says The Best CSS Unit Might Be a Combination: We don’t have to choose between px and rem for spacing. .card { /* use 1lh, unless we run out of space */ --min: min(1lh, 2vi); /* round-up to the nearest half-line */ --nearest-half: round(up, 2vi, 0.5lh);
}

Best JavaScript libraries for websites (pick what you need)

UI: React / Vue / Svelte
CSS/UI: Tailwind CSS, Bootstrap
Animations: GSAP, Framer Motion
Charts: Chart.js, D3.js
Forms: React Hook Form, Formik
HTTP: Axios
Dates: Day.js
Validation: Zod, Yup
State: Redux Toolkit, Zustand
Build: Vite

Tip: don’t add libraries “just in case”-opt for the smallest stack.

#javascript #webdev #frontend #html #coding

CodePen Blog
Chris’ Corner: Light & Boxes

Andy Bell with pitch perfect bait for me: Fun shadow coding challenge. Just a simple line across a page, but imagine that line is a light source. Squares below the light source have a box-shadow. How can we make it so as the squares scroll by, that box-shadow adjusts itself to honor that “light source”?
https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-06-at-7.37.03-AM.png
JavaScript? Of course, the all-powerful JavaScript can do this. That’s what Andy himself did eight years ago with the inception of this idea.

Kitty Giraudel blogged in with a solution involving animation-timeline: scroll(); which I’m quite sure is just the kind of thing Andy was fishing for. But Kitty relied on some information from JavaScript:

In CSS we can’t read offsetTop or offsetHeight, so we pass them from JavaScript as custom properties:

This isn’t illegal, of course.

I think this is one of these things where some JavaScript is not only needed, but also probably quite important to craft a solution that makes fewer assumptions and work nicely in more flexible circumstances — even if still relying on scroll-driven animations.

But certainly it’s fun to flex those muscles a little harder and see if there is a way. Roman Komarov jumped in and used scroll-driven animations as well, but of the animation-timeline: view(); type rather than scroll(). I think this is key as then we’ve unlocked information about the boxes position within the viewport that we wouldn’t have otherwise. I kinda love Roman’s solution as it doesn’t adjust individual box-shadow values at all, those just adjust from a shadow generally “pointed down” to “pointed up” and it interpolates between them. All the logic is tucked into the animation-range declaration.

There is a take where the box-shadow values are manipulated directly with a view() scroll timeline though, from Chris Bolson. Each of the shadows properties are directly manipulated in the keyframe. Like others, this requires the custom properties to be @property delcared with a type so that the animation knows how to animate them. Chris’ approach is extra classy as it has this touch where the further away from the light source, the lighter the shadow, which feels great.

Chris Wachtman jumped in with some alternate takes based on the light source idea. Like what if the light source wasn’t a line, but instead your cursor turned into a little sun!

CSS is so cool. Kitty, Chris(es), Roman, you’re pretty cool too.

📡 System Radar UI

A pure CSS scanning animation.

Perfect for "Server Status" pages or security dashboards. It creates a sense of activity and monitoring without using a single line of JavaScript.

👇 Copy Code:

<!DOCTYPE html>
<style>
  body{background:#000;margin:0;height:100vh;display:flex;align-items:center;justify-content:center}
  
  .radar{
    width:200px;height:200px;border:2px solid #0f0;border-radius:50%;
    position:relative;background:radial-gradient(transparent 60%, rgba(0,255,0,0.1) 100%);
    box-shadow:0 0 20px rgba(0,255,0,0.2)
  }
  
  /* Grid Lines */
  .radar::before{content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:#0f0}
  .radar::after{content:'';position:absolute;left:50%;top:0;height:100%;width:1px;background:#0f0}
  
  /* Scanning Beam */
  .beam{
    width:100%;height:100%;border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(0,255,0,0.5) 360deg);
    animation:spin 2s linear infinite
  }
  
  /* Center Dot */
  .dot{
    width:6px;height:6px;background:#0f0;border-radius:50%;
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    box-shadow:0 0 10px #0f0
  }
  
  @keyframes spin{100%{transform:rotate(360deg)}}
</style>

<div class="radar">
  <div class="beam"></div>
  <div class="dot"></div>
</div>

#CSS #Animation #Dashboard #UI #Snippet