December 16th: Snow, Sprites, and Simpsons
Chill out with a peaceful snow scene from yuanchuan, built with css-doodle.Sponsored:
Have You Tried Vettery?
Vettery specializes in developer roles and is completely free for job seekers. Create a profile to get started.
React Context CSS Sprite Animator
"React 16/Store/Context used to create a CSS Box-Shadow sprite animator. I created this to output data for use with Arduino/LED Matrix devices, and then it just became this little thing" from Paul J Karlik.
Pure CSS Playing Card No.1 - King of Hearts
CSS magician Ben Evans is back with a floating card trick! Check out the link in the Pen description for a time-lapse video of how it was made.
CodePen Radio #248: Ideation
Marie and Klare talk about ideation and how CodePen has used it to work through ideas and projects as a remote team.
Beautiful Scrolling Experiences – Without Libraries
On 24 Ways, Michelle Barker shows how to combine CSS scroll-snap and position:sticky with the Intersection Observer API to create a lovely scrolling experience.
#CodePenChallenge: Checkbox Hack
For week two of the December challenge, we played with interactivity in CSS using the checkbox hack. Check out the Pens from the challenge, including Zed Dash's CSS Hangman game.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 DC, Seattle, Boston, Minneapolis, Orlando, or San Francisco… and set yourself Apart.
Toxic. Can You Survive 30 Days in the Apocalypse?
"On a cold winter night in December, the infection came. Rescue is coming, in 30 days they said..." Play through this challenging RPG from Jamie Coulter and see if you can survive 30 days of scavenging through an apocalyptic, zombie-infested wasteland while you wait for rescue.
Drawing Homer Simpson Using Circles in CSS
On dev.to, Alvaro Montoro shares how he created a CSS illustration of Homer Simpson with circles. Homer is even cross-browser compatible!
Gate of Time SVG + CSS
"Gate of Time from Zelda Skyward Sword in SVG and CSS. I recreated it in two steps. At first, I used Affinity Designer to create the shapes and then positioned and animated them by hand using CSS." From Yannick Brandt.
"This is where you live. Some noteworthy sights are marked with push pins". Click to slow the rotation of the earth and drag to explore in this interactive Pen from Johan Tirholm.
If you think your to-do list is long this week, imagine Santa's! Moncho Massé's Dribbble shot is animated with CSS in this holiday Pen by Tim Rijkse.
Baby Yoda w/ GSAP3
"Pointer down, you must". Help Baby Yoda practice the force (with a little help from GSAP3) in this adorable Pen by jh3y.