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.

June 15th: Coffee, Checks, and Chicken

Coffee for You

Vadim Bauer is your browser barista today! Check out the CSS bubbles and steam on the piping hot cup of animated coffee.

Get CloudBees Feature Flags For Free!

CloudBees Feature Flags can help teams achieve faster, safer and more controlled releases. Get CloudBees Feature Flags free for 6 months!

Airplanes

Do you know about air... planes? Steve Gardner created a stunning, scrolling beginner's guide to these winged machines you might remember from the Before Times.

Two Element Typeface Series

"I created a chiseled-style type face with two elements, (*with the exception of 'W') in pure CSS. No SVGs were used, but a lot of border styles were!" from Chris Ota. Check out the Pen description for in-depth details on how it was made.

#CodePenChallenge: Bubbles

For week two of the GreenSock challenge, we animated some bubbles! Check out the Pens from the challenge, including Louise Flanagan's bubbly bathing cartoon cat.

That Chicken Nugget

Well will you look at that — a chicken nugget. Hover over it and watch the text-shadow animate on the text below. From Will Boyd, who has even more CSS animation surprises in the tutorial linked in the Pen description.

CodePen Radio #272: Video

Marie and Chris talk about video tutorials and demos for CodePen, and how CodePen is planning to improve videos across documentation and our YouTube channel.

Checkboxes Waves

One click sets off waves of checkmarks in this oddly satisfying Pen from Louis Hoebregts.

Free book! Modern Development on the JAMstack

Netlify already sets the standard for developing on the JAMstack but now they’ve literally written the book on it. Pick up a free digital copy of Modern Development on the JAMstack and you’ll most certainly level up your ability to craft super-fast websites with tips and tricks from no other than Mathias Biilmann and Phil Hawksworth.

Pure CSS Halftone Portrait from .jpg Source

Ana Tudor takes a photo and converts it to halftone dots with a surprisingly small amount of CSS.

Underline to Talking Bubble Morphing

A link underline morphs into a speech bubble with a preview of the link in this playful animation from Mikael Ainalem.

CasioPT-1.css

Sarah Fossheim recreates the look and feel of a vintage Casio so perfectly you'll want to pop in some batteries and play it. Check out the Pen description for tutorials on how to make CSS drawings like this.

Photography Page Concept #2

Ivan Grozdic shares a portfolio page design with great navigation animation.

Air Horns

Sometimes, you just need a bunch of air horns. Jh3y's got you covered! Tap or click the screen to blast as many horns as you like.