October 7th: Filters, Friends, and Faces
Alvaro Montoro plays with CSS checkbox hacks to bring you a pure-CSS rendition of the classic decision-making game. Pick an emoji hand to "shoot" rock, paper, or scissors to the computer and see who comes out on top!
Creating Uniform Duotone Images with CSS Filters and mix-blend-mode
"Just a simple demo to remind myself of the power of modern CSS when it comes to editing images in the browser" from Melissa Em. Adjust the sliders to change the grayscale, contrast, and brightness of the images.
"Well, something is sure taking a loooooooooong time to load". Jon Kantner is back with more longcat fun and a wonderfully goofy loading spinner.
Click the Button!
Bård N Hovde wants you to click the button in this Pen.... right? Give it a try and see if you can get a click past the grabby guy in the corner.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 San Francisco, Washington, D.C., or Seattle... and set yourself Apart.
Svelte Word Frequency
"Elaborate the absolute frequency for every word included in a textarea element. Highlight the result through a table and a pie chart" in this Svelte.js demo from a tutorial series by Gabriele Corti.
Day 17/18: Pokemon Friends
A classic scene from the animated Pokemon show, translated to CSS animation by acupoftee.
It's October, so things are starting to get spooky on CodePen! Grab a jack o'lantern screensaver in your favorite color from ilithya. And, check out the well-commented code for tips on creating your own!Sponsored:
Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.
Single Element Battery Charge
"This is a single element battery charging indicator. Uses a pseudo element with a stepped animation for the charge level" from jh3y.
CodePen Radio #240: Customer Research
Chris and Marie talk about how CodePen's style and methods of customer research have changed over the years, and how it's been helping influence the decisions made about features at CodePen.
Inktober 01 - Grid
halvves kicks off Inktober with some shader-doodle art in this subtly-animated Pen.
Visualizing The Sun's Path in the Sky
Mustafa Enes uses Zdog to enlighten us about the sun! "Change location using the south/north buttons to see latitude's effect on sun's path in the sky".
Blast the falling blocks before they hit the ground in this retro-style browser game from Matthew Fournier.