This week: Process, Perspective, and Pizza
Emoji Ajax Type Ahead
Tobi Weinstock's "Ajax type ahead emoji search using the fabulous Fetch API". Search for your favorite emoji and set it as the background pattern for this Pen!Sponsored:
[Free eBook] The Complete Guide to User Testing
Learn best practices on how to build an effective test plan and avoid common mistakes. 20-page eBook. Get user insights fast.
CSS-only numbered lists with "drop" shapes
"Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds." by Ines Montani.
Hot and Sticky: The Process
Mariusz Dabrowski gives us an in-depth look at how he created his animated mug and marshmallow Pen for the Creative Coding Club's "Hot and Sticky" challenge with Matter.js and P5.js.
CSS Only Order Process Steps
Jamie Coulter's Pen animates the steps of a checkout process with delightful gift-wrapped details.
Using Resources from npm on CodePen
Want to bring in resources from npm for your Pen or Project? This tutorial post covers all the different approaches you can use.
List Delete - Shattered Glass
Is there anything more satisfying than marking something off your to do list? In Mikael Ainalem' Pen, they're not just deleted, they're smashed!
JPNG.svg (Transparent PNG with JPEG Compression)
"Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an tag, or as a background-image" by Shaw.
A soothing perlin flux from Louis Hoebregts. Press down on the wave to change the speed and color.
Adriano Interaminense's text hover effect demonstrates the power of perspective in CSS. Edit the text to get a little perspective on your own words!
Paint with CSS: Persistence of Pizza
Christina Gorton's CSS illustration, inspired by Dali's "Persistence of Memory", celebrates the enduring charm of pizza (and sleeping cats!).
Daniel Del Core's experiment with SimplexNoise and textures yields this hypnotic, rubbery creation.