While Blue Monday might be just marketing nonsense made up by a travel company, the cold weather and long nights can make January seem like a miserable time.
So here are five Codepens that show off some amazing HTML/CSS/JavaScript programming and cheer you up.
Penguin | Pure CSS by Julie Park
See the Pen Penguin | Pure CSS by Julie Park (@juliepark) on CodePen.
While I might hate the cold, this little adorable pure CSS penguin makes cold weather just a little bit better. With the HTML compiled in Pug and the CSS built in SCSS, it’s a great little exploration of what you can do with variables.
Responsive CSS Leif by Jhey
See the Pen Responsive CSS Leif – Animal Crossing 🐻 by Jhey (@jh3y) on CodePen.
Leif is one of the best recurring characters on Animal Crossing, a calm sloth interested in all the plants you can have in your town or on your island. And this is a responsive version of Leif compiled in Pug, built in Stylus, and using just a tiny bit of Babel-compiled JavaScript. The slowly sprouting flower, blinking eyes and the sparkles around the wreath just make it even better.
CSS Cheerful Pineapple by Liz Wendling
See the Pen CSS Cheerful Pineapple by Liz Wendling (@Elwend) on CodePen.
It’s so cheerful, bright, and bouncy, and the elegant HTML and SCSS makes it a lovely thing to experiment with, especially if you want to figure out animation.
CSS Eevee by David Khourshid
See the Pen CSS Eevee by David Khourshid (@davidkpiano) on CodePen.
This is a stunning amount of work brought in via CSS. Not only is Eevee a Pokémon made entirely out of CSS, but it’s also fully animated with the CSS as well. Then add in that gorgeous background (also CSS!) and well-designed text, and it’s just absolutely delightful.
Reactive Synth by Alex Lerida
See the Pen Reactive Synth by Alex Lerida (@lerida) on CodePen.
Built in a single empty div, this combination of Sass-compiled CSS and Babel-compiled JavaScript isn’t just a gorgeous little thing to look at, it’s also completely playable in piano, guitar, and drum. Have a play and see what you could create!
