December 5th: Welcome to the CodePen Spark
This November we saw hundreds of people put their heads down and code some really beautiful things.
Animography's Mobilo Text Editor
Love type and animation? This text editor by kittons is a beautiful combination of both.
CSS Happy Egg
Converted from a Dribbble shot, Cassidy Williams captures the happiest little egg that ever was. The egg shape is made through the not-often-used multi-value syntax for
border-bottom-left-radius: 50% 20%;. Plus some nice inset `box-shadow` action.
Reverse Clip Path with Blend Modes
Zach Saucier applies a SVG
<clipPath> to a couple of images containing animated GIF backgrounds, then blends them together over solid background colors.
How Style Scoping Works with Element Queries
Tommy Hodgins writes (and makes a lot of demos) around the idea of "Element Queries". That is, media queries that are scoped to properties of the element itself, not the entire viewport.
Some lovely "vector" constructions from Louis Hoebregts in Three.js.
Searching for a Better Search
Hill Holiday only has six pages on their site, so they thought they might not need search at all. But they added it anyhow and found some interesting information.
CSS Day 2016
Looks like Stacy Kvernmo covered a lot of awesome modern CSS stuff in a recent talk at CSS Day. She gathered all the examples here in this Collection.
Flight through a lonely desert
Eli fitch explains: "the backdrop colors are generated in a shader and applied to a big plane." Makes me thirsty.
Loaders and Spinners
Our very own Tim Holman has Collected five hundred and twenty "Loaders and Spinners" Pens (and counting!)
Spotify(ish) Duotone Effect
Melissa Em's "attempt at replicating the duotone effect used by Spotify." Looks like the image itself is grayscaled and contrast-boosted, then blended over a solid color pseudo element.
Learn Scrawl-canvas with Editable Embeds
Rik Roots uses Editable Embeds set up as a tutorial.
Go PRO on CodePen
Unlock the full power of CodePen with features like Live View, Asset Uploading, Presentation View, and many more.