May 1st: Gardens, Graphs, and Grids
Sass Tools for Contrasting Colors
Giana's project is "a collection of functions to make it easy to test the contrast between colors and tweak them until they pass your specified requirements. Formulas are based on the WCAG 2.0 guidelines."
A Drag-and-Drop Succulent Garden
Nat Cooper's Creative Coding Club theme for the month is "What Grows in the Garden of Your Mind?". Build your own mini-garden to the project's specs and watch your web dev powers grow!
3D Steps Counter Card
In Steve Gardner's step counting app design concept, the diamonds satisfyingly morph into a bar graph.
Kittons is back with another mindbending Pen! "Every time you click you get a new effect. All glitches are made by vertex modifiers that take mouse coordinates and animation vertices as input and outputs a new set of transformed coordinates."
Pure CSS Loaders
Click the "source" link on any of Ivan Khartov's appealing single-element loaders to grab a quick copy of the CSS.
CodePen T-Shirts are Back!
By popular demand, our supersoft logo shirts are back in stock! $24.99 with free shipping all around the world.
Spring Into CSS Grid
Joni Trythall tutorial is packed with detail and a demo to help "take the potential intimidation factor out of the mix to get started, or spring into, CSS Grid."
You can say a lot with a humble toggle swtich! Paraskevas Ntinakis sure did with this charming Pen.
The Ultimate Owl Collection
We never knew just how many awesome Owls there were on CodePen until Owlypixel put together this fantastic collection!
Constellations form and connect under your cursor as you hover around in Thibaut's interactive Pen.
How to make a Zelda Fairy (Part 1)
Ted McDonald kicks off a post mini-series detailing how he created an animated, Breath of the Wild-style Zelda fairy with CSS.
CodePen Radio #127: Alphas and Betas
On the latest episode of CodePen Radio: Chris, Rachel, and Marie talk about the stages of testing CodePen’s new Projects feature