Christmas End

Favourite Pens of 2023

I’ve been collecting imaginative and technologically tricky Codepens on a Trello list for quite a while, primarily to learn and perhaps implement them in a project at some point. A good source for high-quality pens is the recently published list of the Top 100 Pens of 2023 on codepen.io. I have already noticed some of the works over the course of the year, but some have slipped through my fingers and so I am glad that I have this list, the order of which is calculated from the hearts (likes) given and their level.

Here are my 10 favourite pens from 2023 … and, like last year, an 11th jaw-droppingly good pen to start with.

Fantastic piece of CSS art ... and a little JavaScript

What Rafa has conjured up with his pen ClimaCode is truly breathtaking and is spread over 3,658 lines of HTML (including SVG objects), 904 lines of CSS and “only” 138 lines of JavaScript. It’s fun to try out all the controls of this climate dashboard and enjoy the soft parallax effects. My favourite button is of course Nessy.

(Also try out his coffee generator “For The Love Of Coffee”, which is indispensable for IT professionals ;))



1. The aurora (only CSS) by Ostylowany




2. …CSS-only fluid slider… by Ana Tudor




3. Futuristic Dial Button by LukyVj




4. Gooey Toggle Switch by Nicolas Jesenberger

(Don’t miss his Squishy Switch either)




5. Gorgeous animated gradient borders… by Jason Lengstorf




6. Fancy hover effect on avatar by Temani Afif




7. 3D Cards by Mubanga










10. Background Slider | Swiper by Ecem Gokdogan

Syndication

You can interact with this article (applause, criticism, whatever) by mention it in one of your posts or by replying to its syndication on Mastodon, which will be shown here as a Webmention.

In case your blog software can't send Webmentions, you can use this form or send it manually via webmention.app or Telegraph:

Webmentions

No Webmentions yet...

Related