October 28th: Monsters, Motion, and Mazes
Single Div CSS Book Search
A spotlight search through a library reveals a little surprise — all in a single div! From Lynn Fisher for #divtober.
Get your browser ready for Halloween with Adam Kuhn's monster generator! Click the arrows to swap outfits and heads to make a really creepy creation.Sponsored:
Feature Flag Management Made Simple
Easily manage and deploy features across different users or segments to get instant feedback on how customers are using it in production.
Mehdi Mohammadi Sanj on CodePen
CodePen community newcomer Mehdi Mohammadi Sanj is cooking up a showcase that's good enough to eat!
25 Days of CSS Animations: Teaching Myself CSS through Motion Design
Tee Diang shares the tools, powerups, and process behind her 25 day sprint of creating CSS animations in this inspiring and informative post on dev.to.
#CodePenChallenge: Smooth and Sharp
For week three of the October 2019 "Opposites" challenge we explored the opposites smooth and sharp. Check out the Pens from the challenge, including Daniel Nombre's adorable "Don't Touch the Hedgehog". Thanks zimjs.com for sponsoring!Sponsored:
Best in class video infrastructure in one API request
Add scalable live and on-demand video to any app, using any web framework. Mux Video uses machine learning to host, encode, and deliver video more efficiently and at higher quality.
Pure CSS Range Rover Truck
An exploration of the `:out-of-range` pseudo-selector from jh3y. Change the terrain level to something over 5 and watch this unassuming vehicle transform into a monster truck!
yuanchuan continues a CSS property challenge with this lovely Pen that combines css-doodle and the `text-decoration` property to create beautiful bookmarks. Check out the Pen description for a link to the Twitter thread that started it all!
Text appears and fades like a spooky ghost in this Halloween-themed Pen from ilithya. "Experimenting with a CSS blur filter, text-shadow, and transform skew effects animated."
Svelte Infinity Maze
In this playable demo of the Svelte.js library, "a square moves within the boundaries of a maze to reach a goal, in an endless set of levels". Click the arrow controls to move the square through the levels. Created by Gabriele Corti.
Click for treats! The Keyframers created this Pen during their Twitch stream, just in time for Halloween. Check out the Pen description for links to the recorded stream and handy resources.
SVG Random Smoke
A wisp of SVG smoke follows your every move in this Pen from Sten Hougaard. "Playing around with SVG circles placed semi-random and colored using HSLA which is great for shades."
Eyes Follow Cursor
Cartoon eyes follow your cursor around this eerie Pen from Tyler Durrett. If you're not feeling the Halloween spirit, check out the Pen description for a less-ominous one made of arrows.