Best of CodePen — 2025

1. 1
   Article

   CodePen·49w

   Chris’ Corner: Liquid Ass – CodePen

   The liquid glass design trend is gaining popularity among developers, with CSS implementations using backdrop-filter blur effects to create frosted glass appearances. While visually appealing and demonstrated by Apple in their recent designs, this trend raises accessibility concerns due to poor text contrast ratios. The effect has been around for years but is experiencing renewed interest, with developers creating various implementations and tutorials.

   50

   6
2. 2
   Article

   CodePen·27w

   Chris’ Corner: Cursors

   CSS provides built-in cursor styles that can enhance user experience when applied thoughtfully. OS-supplied cursors support accessibility features like size adjustments, while custom cursors can create problems. The article explores cursor best practices, highlighting how tools like Figma extend cursor functionality with contextual information, preview states, and collaborative features without replacing the default cursor entirely.

   43
3. 3
   Article

   CodePen·24w

   Chris’ Corner: HTML

   Soft navigations is a new browser API term for SPA-style page changes that help measure Core Web Vitals. Google's influence over web standards extends to image formats, where WebP gets preferential treatment over JPEG XL. The download attribute on links only works for same-origin resources; cross-origin downloads require a Content-Disposition header. Duplicating HTML IDs breaks getElementById, hash links, ARIA attributes, and creates accessibility issues, making unique IDs a genuine best practice rather than arbitrary advice.

   25
4. 4
   Article

   CodePen·34w

   Chris’ Corner: Word Search

   A showcase of creative word search game implementations using web technologies. Features examples including a canvas-based version with interactive line drawing, a pure CSS approach using checkbox selectors, a responsive design that adapts grid size, and colorful aesthetic variations. Demonstrates how simple games can inspire front-end developer experimentation and creativity.

   12
5. 5
   Article

   CodePen·37w

   Chris’ Corner: Simple, Accessible Multi-Select UI – CodePen

   Demonstrates how to create an accessible multi-select checkbox interface using vanilla HTML and CSS instead of React Native. Shows proper semantic markup with label elements, screen reader accessibility, focus management, and smooth animations using CSS transitions and the :has() selector. Emphasizes that complex UI interactions don't always require JavaScript frameworks.

   11

   1