March 23rd: Pops, Patterns, and Play
Connect Four in Vue and CSS
You can play a round of Connect Four in the browser, thanks to Josh Collinsworth! Check out the Pen description for an in-depth look at how it was built and animated.Sponsored:
The #1 Local WordPress Development Tool
Local by Flywheel is a fuss-free (and actually free!) local WordPress development app designed to simplify the workflow of designers and developers. We make it super simple to spin up a local WordPress site, develop it, share it with your clients, and ultimately take it to live. Stop debugging local environments and spend more time designing, developing, and launching WordPress sites with Local by Flywheel.
A cheerful little roll of paper runs free in this timely animated SCSS Pen from Adam Kuhn.
Homer's face Animated /w GSAP
Homer Simpson follows your mouse and cycles through his many moods in this interactive Pen by Kasper De Bruyne, built with the Greensock Animation Platform.
Exciting Multi-line Highlights
Manan Tank shares a selection of fun hover highlights for multi-line text. Careful when you hover over that spoiler!Sponsored:
Live Remote React Training
Level up your team with us! It's convenient, budget-friendly, and just as interactive as an in-person workshop. Learn from React experts and the creators of React Router and Reach UI.
Jagged Chevron Pattern
Johan Karlsson continues a series of bold pattern experiments in Babel with this striking chevron.
CSS Logical Properties
Andy Bell shares a tutorial on how to "create spacing that works regardless of the direction of your content or the environment of your users" with CSS logical properties.
Kids Timetable Generator
Michelle Barker shares a time planning concept for kids. Randomly sort activities onto each day, or clear the timetable to start fresh.
These unassuming buttons all have a surprise inside! Click for a little pop of particle fun, from Louis Hoebregts.
Stay Cool w/Responsive motion-path
"Putting my solution for responsive motion path to the test. Here's a little message traveling around a popsicle" from Jh3y.
Fit Text with CSS Variables
" Fit text to the viewport with CSS variables! All you need is to know the number of characters, which a little JS can help with..." from Stephen Shaw.
Conic Gradients + CSS Masks (no FF)
Yoksel shares a mind-bending cube of conic gradients and CSS masks. Chrome only for now, until `conic-gradient` is available everywhere.