December 9th: Sweaters, Shibas, and Sweets
Holiday CSSweater Generator
Let Adam Kuhn knit you a CSSweater in a holly-jolly color combo, or flip the switch and check out Dark Mode.Sponsored:
Testing your way, Coded AND Codeless.
Super-fast authoring. Amazingly stable tests. Your way—coded, codeless, or both! Capture a stable test in minutes!
The Long and Short of CSS Flexbox Container Properties
Sharkie shares a beginner-friendly primer on the ins and outs of container properties in this tutorial post on dev.to.
Interactive Hippo Button Tutorial
Mariusz Dabrowski shares the full scoop on the creation of this adorable hippo button, from the thought process through the illustration to the code in a generously detailed post.
We saved the toughest challenge of 2019 for last! December's challenge is all about CSS with strict limitations. For week one, we asked you to style a Pen with :nth-child and it's relatives ONLY. Check out the Pens from the first week, including Ryan Mulligan's "0123456789 Rhymes".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.
Dan Wilson gets into the holiday spirit with an impressionistic candy cane, build with CSS motion path.
"Flow visualization. The gradient being used is the gradient of a certain angle, but the flow lines themselves form coaxial circles. Dragging with the mouse will seed new particles" from Peter Liepa.
CodePen Radio #247: Ads
Chris and Marie talk about the various ways sponsorship and advertising has changed over the years at CodePen.
Animated Atom SVG
Brad Frost continues a series of "making something every day in December" with an animated SVG atom. Check out the making-of post, complete with a custom-styled embedded Pen.
Working with 2D and 3D Scenes and Geometry in Forge Viewer
On the Autodesk community blog, Petr Broz demonstrates how to "traverse the hierarchy of model elements, access or manipulate individual geometries, or compute their bounds" in 2D and 3D, with lots of embedded Pens along the way!
"Using SVG and VueJS to generate Mochi Shiba pop-up effects when hovering a container. I drew the Shiba in Illustrator with SVG and had a load of alternate parts for the Mouth/Eyes/Ears ... then I use VueJS properties and CSS to show the correct SVG parts" from Simon Goellner.
Introducing Felix, from allemmedup: "Felix is an interactive digital assistant sure to either brighten your day, or irritate you to the extent of your sanity. It’s up to you which way the tides will churn."
A Literal CodPen
Jon Kantner brings the most common CodePen typo, CodPen, to life with a real cod-Pen. For another laugh, check out codpen.io.