October 21st: Cars, Characters, and Collections
Only CSS: Sunset Bird
Yusuke Nakaya celebrates the beginning of autumn with a beautiful sunset scene, drawn and animated with CSS.
Text to Life
Florin Pop takes a bite out of the "text to life" apple in this striking animated Pen, inspired by Kyle Shook's disco dancin' Pen (check out last week's Spark to see!)
acupoftee builds a Pokemon pet in the browser! "Eevee's one of my favorite Pokemon and I've always enjoyed playing with it in Pokemon X. It was surprisingly therapeutic and helped tremendously during busy or tough days. Thus I wanted to create a similar therapeutic experience for myself, and anyone who's in need of a cute therapy Pokemon"
CodePen Radio #242: Collections
Stephen and Marie are on the show to talk about recent updates and improvements to the Collections feature on CodePen.
A Matter of Gravity
"Use the physics engine to create a gravity-based game, where a shape is meant to reach the goal by means of rotating the wrapping container" from Gabriele Corti.
One Background for Multiple Divs
Ivan Bogachev demonstrates how to split a single background image across 3 different divs using a combination of Less, Pug, and a picture of a pug.
#CodePenChallenge: Small and Big
For the second week of the October "Opposites" challenge, we worked with the opposites Small and Big. Check out the Pens from the challenge, including Julie Park's "Onboarding" UI design.
CSS-Only Horizontally-Scrolling Cards with Snapping
"It's a common design problem to have content cards to lay out in different arrangements in various viewports. In this exploration, I wanted to see how cards might be more effectively organized using a simple design pattern of a scrolling horizontal list" from Allan White on Dev.to.Sponsored:
A Project Management Tool Built for Teamwork
Monday.com helps you plan, manage, and track even the most complex projects. Collaborate and communicate with your team all in one place.
Volume Toggle Switch
Aaron Iker translates a clever volume toggle concept from UI8's Dribbble shot to CSS. Click the speaker icon to activate the toggle.
Animate Using Transform:Translate
Joan Perals uses a superhighway full of animated cars to demonstrate the benefits of using `transform`:`translate` for animation performance.
Creep your cursor through a curtain of vines in this adventurous Pen from Thibaud Goiffon.Sponsored:
Plan, Manage, and Track with Ease
Map out key milestones, prioritize, assign work, set deadlines and get automated notifications. It's a flexible tool so you can change and customize anything, any time.
Chibi Character Generator
Roll up a cute character for yourself in Michael Schwartz's generator. Click the "Randomize" button to get a fresh look!