February 18th: Sass, Sun, and Still Life
Pure CSS Still Life - Water and Lemons
Ben Evans paints a still life with CSS in this staggering work of front-end art.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 Seattle, Boston, Washington D.C., Chicago, Denver, or San Francisco… and set yourself Apart.
#CodePenChallenge: Triangles 🔺
Check out the Pens from week two of the February 2019 Shapes challenge, including Morné Erasmus' "Codemeleon".
Randomly Generated Pure CSS Menu Icons w/ Markup and SCSS
Need a menu icon? Grab the markup and SCSS from Jamie Coulter's incredibly helpful Pen.
CodePen Radio #210: Updating Rails
Tim and Marie talk about how CodePen updated Ruby on Rails from 4.2 to 5.2.
Recreate a Flexbox Based Navbar with CSS Grid
Kent C. Dodds renovates a flexbox navbar with CSS grid in this live coding demonstration on YouTube.Sponsored:
Fullstack Advanced React & GraphQL
Ben Matthews uses walking noise to create a fire-like effect in this kaleidoscopic animated Pen.
Animation in React
Donovan Hutchinson takes you through the basics of React Animation in this tutorial post with lots of helpful CodePen embeds.
How to Develop a Countdown Clock using Vue and Luxon (for Rockstars)
Lee Martin demonstrates how to use Vue and Luxon to create a countdown clock, a tool Lee has used on websites for bands like Coheed and Cambria, Guns N Roses, and The Foo Fighters.
GSAP Powered Fretboard
Click a chord in Rodrigo Hernando's Pen and see it smoothly demonstrated on the fretboard.
Sun Blocked: Solar Eclipse Explained
"This is totally how an eclipse happens". Dusty Button translates a Dribbble shot by Gal Shir into CSS in this charming animated Pen.
Sass Sticker Peel
Boris Šehovac sticks a little Sass to your monitor with this animated sticker peel.
Stacked Flexible Slides Layout
"This example illustrates how to create layout of slides stacked on each other (especially useful for fade in/out transitions). It's achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow" from Kamil Dyrek.