This week: Sleeping, Swimming, and Squishing
Single Div CSS "Six"
Lynn Fisher celebrates 6 years of her Single Div project with a spectacular SIX. Check out the Pen description for a link to the full project.Sponsored:
Make Git 10x faster with GitKraken
Download GitKraken Git GUI free on Windows, Mac & Linux! Integrate with GitHub, GitLab, Azure DevOps & Bitbucket for a streamlined workflow.
Emojis as Mask Images
Emoji have many uses! Yuanchuan uses them here as SVG masks with css-doodle, Check out the subtle animation on the umbrella.
Suzanne Makes 100 Things In CSS
Suzanne Aitchison is participating in 100 Days Project Scotland 2020 with CSS illustrations. "Lots of project participants will be crafting, sewing, drawing... but I'm out to show programming can be art too yo".Sponsored:
You Should Probably Learn React
"Text and image CAPTCHAs are boring. Here are more interesting options". Olivia Ng shares a set of playful puzzles that are a lot more fun than your average captcha.
Louis Hoebregts animates a napping sloth without disturbing their rest. Hover over the sloth to check out the unique movement.
Ghost at the Disco
You know it's a party when the ghost shows up! Anna the Scavenger's Three.js scene is haunted by a shimmering spectre.
#CodePenChallenge: Viewing with Vue
For week three of the May challenge, we created image galleries with Vue. Check out the Pens from the challenge, including Hai Le's Polaroid-inspired gallery.
Pure CSS Lite Brite, but with CSS Counters
Rock Starwind recreates the interactive fun of a vintage Lite Brite toy with CSS! "This pen was initially designed with the intent to track how many total pegs were plugged into the board. But because of the discussion in the background that inspired it, it quickly became an ambitious project to demonstrate the power of CSS Counters and what CSS alone (or at least this modern iteration of it) can be capable of."
CodePen Radio #269: Docs and Blocks
Chris and Marie talk about updating the documentation at CodePen to support WordPress’ block editor – also known as Project Gutenberg.
Range Sliders With a Rolling Counter
Jon Kantner gives the counters on these range sliders a satisfying rolling effect as the numbers change.
Cool off for a moment with Kasper De Bruyne's inviting pool scene.
Button Squish Animation
Aaron Iker's unassuming buttons have a pleasantly bouncy "squish" effect when you click on them.