July 9th: Surrealism, Subtlety, and Silk
Visualizing The Earth's Orbit & Seasons
An exploration of the seasons that "works with CSS custom properties and some border-radius magic", from Mustafa Enes.Sponsored:
You can deploy a website on Netlify with a single click. Try out a Gatsby, Hugo, or 11ty site by clicking a single "Deploy to Netlify" button and go from there!
The Beauty of Mathematics - Linear Transformations
This lovely visual exploration of linear transformations in mathematics is the second in a series from Nick Shillingford.
Layout is overrated
"Bootstrap: overrated. CSS Grid: overrated. Just throwing everything at the page: Hottest trend of 2018" - a little layout fun from Andy Barefoot.
The div that look different in every browser
Martijn Cuppens' experiment with outline and a negative outline-offset yields some whimsical cross-browser results. Which one is your favorite?Sponsored:
The ideal way to experience WordPress. Jetpack is a WordPress plugin that provides incredibly useful features like backups, security scanning, image performance, social media integration, Markdown support, and more.
CodePenChallenge: Signatures Roundup
The CodePen community showed off its signature style in the first July challenge! Check out a few of our favorites from the challenge prompt "sign on the dotted line".
Dion Dermott brings a bit of midcentury surrealism to the frontend with a parallax animation of Magritte's "Golconda".
CodePen Radio #181
On the podcast, Marie and Chris talk about how we decide what new features get added to CodePen, and get into the process of taking them from a lightbulb moment to building them out on the app.
Low poly animals
From Mikael Ainalem: "using raf (requestAnimationFrame) to animate between different low poly animals".
align icons micro-interaction
A bit of subtle delight: a CSS menu animation Inspired by Oxygenna's Dribbble shot, from Mert Nerukuc.
There's no place like home
"A CSS-only house based off of the Pokemon Gameboy art featuring some JS and CSS variables to change its colours" from Tiffany Choong.
css (cascading silk screen)
Daniel Warren recreates one of his own paintings in CSS in this beautiful Pen. Make sure to check out the code comments for a link to the original work!
Profile Grid Demo
Jules Forest shares a demo of the solid CSS grid used to display profiles on Women Who Design.