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.

January 11th: Hills, Huts, and Hearts

Sale Label

Anna Batura shares a quartet of eye-catching animated sale labels.

Build Cloud-Native Apps Fast

Deliver apps faster with REST, GraphQL, CQL, and JSON/Document APIs. Try Datastax Astra, the multi-cloud DBaaS. Get started with 5 GB free.

Hills

Hit the road and cruise into the sunset with this CSS animated illustration from moPsych.

#297: Looking at the Top Hearted Pens of 2020

For our first-ever video podcast, Chris Coyier and Stephen Shaw take a look back at the top 100 Pens of 2020.

"Take a number" Contact List

Suzanne Aitchison continues a series of paperlike Pens with this contact list in the style of "take a number" posts on bulletin boards.

#CodePenChallenge: Solid

January's Challenge theme is "The States of Matter". For the first week, our host Kristopher Van Sant challenged us to work with solids! Check out the Pens from week one, including pjkarlik's stunning "Jumping My Train - WebGL".

20

ycw takes us on an endless ride through rainbow roads in this gorgeous Three.js animation.

SVG Blob-u-lator

It's time to play with some blobs! Control the displacement scale and X & Y Turbulence Frequency with the sliders in this interactive Pen by Adam Kuhn.

Build your site on WordPress.com

New year; new you. Why don't you spin up that site you've been thinking about making, and do it on WordPress.com? You can build any type of site on WordPress.com. It can be entirely free, but each one of their paid plans unlocks features that might be of strong interest. Their least expensive plan gets you a custom domain name, and the business plan unlocks SFTP and Database access, giving you 100% control.

Single-Div Wooden Hut

Albert Walicki crafts a charming scene of life among the CSS trees in a single div!

Details Modal

"By nesting a modal inside a details element it is automatically shown when the details is opened. And by nesting the overlay inside the summary element, we can use that to trigger a close." From Niels Voogt.

Snowflakes with clip-path trigonometry

Cut out your own browser "paper" snowflakes with Michelle Barker's Pen. Drag the handles to generate a unique snowflake.

CSS shape-outside

Joshua Comeau demonstrates how to use shape-outside to wrap text around an image. Check out how the text makes room for the lil person even as you resize the demo!

Emoji Icons

Mark Mead demonstrates a cool background technique, scaling and blurring a set of emojis as backgrounds for themselves.

Extra News