Grid Layout Collection

An extrordinary collection of Pens exploring CSS grid layout from Gabi.

Sponsored:

​HelloSign API, developer focused eSign API

Embed documents directly on your website with just a few lines of code.

Beautiful Pens for Color Palettes

We rounded up some Pens that were specifically built to showcase and play with color palettes.

Firework

Moses Holmström uses canvas to blast a fountain of circles at you! The colors, the speed, and the way they quickly fade away and slow down is pretty mesmerizing.

Introduction to Web Audio API

Greg Hovanesyan walks us through the basics of the native browser Web Audio API, while building some very fun demos. It's how a full-blown real-time equalizer can be made in the browser and it doesn't feel out-of-reach complicated. Definitely play with the blues guitar demo!

Miss Kobayashi's Dragon Maid

Liu Yuyang flips over individual characters with a fairly simple "3D" animation and hidden backface-visibility.

Daily CSS Images

We've featured this before, but just a reminder that it's such a fun little project and some of the cutest Pens come out of it. We'll link to the hashtag on Twitter here, where you can see some of the latest and find the link to sign up for it.

leRenard on CodePen

This elegant profile features "a series of animated vintage book graphics based on the work of Henning M. Lederer"

Miyazaki ghosts and performance trolls

Nerdmanship's thoughtful post, written to accompany his gorgeous Miyazaki tribute Pen, encourages developers to "...acknowledge your fears, face them and develop a sense of appreciation for available solutions."

A-Frame Tutorials on YouTube

Alexandra Etienne takes you through the basics of using A-Frame from MozVR on CodePen in her video series on YouTube.

Gradient Buttons with Background-Color Change

Patel gradients, so hot right now! MrPirrera's collection of buttons change background color on hover.

Hanging Punctuation in CSS with @supports and Custom Properties

Dudley Storey demonstrates how to place punctuation "outside" the element box with CSS technique, including workarounds for browsers that don't support hanging-punctuation yet.