Best of CodePen — 2024

1. 1
   Article

   CodePen·2y

   Exploring 21 Unique Custom Cursors for Your Site – CodePen

   Microinteractions, such as custom cursors, can enhance user experiences by adding uniqueness and interactivity to a site. The post explores various types of custom cursors, including trailing, revealing, and interactive game cursors, along with their implementation techniques using CSS and JavaScript. Performance and accessibility considerations are also discussed. Real-life application examples and relevant CodePen demos provide practical insights for web design and development.

   140

   3
2. 2
   Article

   CodePen·2y

   Chris’ Corner: It DOM Matter – CodePen

   New CSS features such as the :has() pseudo-class, <dialog> element, and anchor positioning allow for greater flexibility in DOM structure. These advances mean developers no longer need to position elements strictly for styling purposes, enhancing both functionality and accessibility. These techniques simplify previously complex tasks like ensuring visibility and positioning relative to other elements.

   16
3. 3
   Article

   CodePen·2y

   Chris’ Corner: Gold Star CSS Bloggers – CodePen

   Modern CSS offers many exciting features like CSS grid layout, scroll-driven animations, and container queries. Adam Argyle's 'Responsive App Switcher' demo showcases CSS grid layout with `grid-auto-flow`, scroll snapping, and `aspect-ratio` usage. These features promise innovative ways to manage layouts and animations. Bloggers Ahmad Shadeed, Josh Comeau, and others are pivotal in sharing in-depth knowledge and creative implementations in CSS.

   13
4. 4
   Article

   CodePen·2y

   Chris’ Corner: Tricks With CSS – CodePen

   Learn how to create a scrolling element that starts and stays scrolled to the bottom using CSS. Discover a CSS trick for bottom-anchored scrolling while considering the accessibility concern it poses. Get insights into the new reading-order property in CSS and its potential uses. Explore clever CSS implementations such as using blur to create a box-shadow effect and utilizing math functions for typographical systems and simulating randomness in CSS.

   11