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.Sponsored:
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!
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.
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.
One click sets off waves of checkmarks in this oddly satisfying Pen from Louis Hoebregts.Sponsored:
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.
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.
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.