March 6th: Grids, Gradients, and Ghosts
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.
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.