August 5th: Horses, Hearts, and Hamburgers
Clip Clop Clippity Clop
We're off to the races with Steve Gardner's spectacular animated CSS horse. Click on the horse to slow it down and get a peek at what makes it go!Sponsored:
An Event Apart
To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium. Join us in Chicago, Denver, or San Francisco… and set yourself Apart.
ilithya crumples up a paper sun with p5 and WebGL. Click and drag it to rotate and fold, or just bask in the papery rays.
WebGL Enhanced Drag Slider Tutorial with Curtains.js
Martin Laxenaire shows you how to create a slider with a slick WebGL transition effect in an in-depth tutorial series with lots of helpful demo Pens along the way.
A Stardew Valley-style minigame from Mariusz Dabrowski. "Click and hold your mouse button, press any key, or tap on your phone to move the anchor. Fill the bar to catch the fish."Sponsored:
WooCommerce is a flexible and powerful eCommerce open-source plugin for WordPress. There are 450+ plugins for it, enabling things like booking appointments, memberships, subscriptions, and tons more. We use WooCommerce at CodePen to sell t-shirts and hats, managing our inventory and handling fulfillment with a ShipStation plugin.
CodePen Radio #232: Side Projects
Cassidy and Marie are on this week to talk about side projects and how they can help you personally as well as professionally. Let us know what kind of side projects you're working on!
Tabs Navigation UI
Natalia Davydova shares a tidy tabs UI with with just the right amount of subtle animation as you switch tabs.
Find Emoji by Description
"I discovered a list of categorised emoji utf-8 characters, and extracted some information to a JSON file. Made this simple webapp/pen to do fuzzy search in the emojis." Check out the Pen description for more details on what powers Sten Hougaard's fuzzy emoji search.
Exploding Low Poly Heart Container
There's a little bit of the satisfying kind of heartbreak in Ryan Zola's perfectly low-poly Pen.
Harry Potter Spells (with SVG Animation)
Get some wand practice in before it's time to go back to Hogwarts with Olivia Ng's spellbinding Pen, based on the game Wizards Unite.
Thousand Forests in One Acorn
Stephane Buellet generates a forest of mini-trees with a bit of Poisson-disc sampling by Nicolas Barradeau, and a line from Emerson.
Experiment with the effects of CSS filters on a photo in this interactive playground from nitnelav.
Ready for lunch? thewizardjs will grill up a burger stack as high as you want. The only limits are your appetite and your window height ;)