cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen

The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

December 5th: Welcome to the CodePen Spark

Codevember Finale

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-radius, like: 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.

Planetygon 🌐

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.