March 5th: Chameleons, Challenges, and Celeste
Join the CodePenChallenge!
We know the CodePen community loves a good challenge! Every Monday this month, we’ll post a new challenge prompt to spark your imagination, and share some resources to help you make your ideas come to life. Week one's prompt is: Stargate.Sponsored:
Learn essential CSS skills with Treehouse
Add to your creative tool box. Start your path to becoming a front-end web developer, or brush up on your skills with our CSS course.
Oscar Pool 2018
Catherine shares how she created an Oscar pool with a CodePen frontend and a Google Form backend in this tutorial post.
Animated Status Indicator
Show your status with a wiggly worm in this Pen by Bard N Hovde: "The original idea was an animated 'presence indicator' i.e 'Carl is typing...'".
The Chameleon from Null Island
"This endangered chameleon species is usually spotted in the dense forests of Null Island. With special abilities like camouflaging to background colors and reacting to DOM hovers, it has an appetite for Defaultae Pointericus insects." A color-changing, cursor-eating creature from the mind of Airnan.
A collection of elegant button hover states from Paraskevas Ntinakis.
Because even when you've got nothing, you still want to show something! A little something for a 404 page or empty search results from Aidan Breen.
Celeste snowglobe round 3D
"Special sauce includes bokeh shapes for the snowflakes and light rods, which grow & fade out as the move further from the scene center." One of a series of fantastic round 3D Pens by Dave DeSandro.
Donut Progress Bar
Donuts. Is there anything they can't do? Measure your progress in pink sugary goodness in this Springfield-style Pen from ErreC.
Team section - CSS Grid + flexbox
Meet the team of pro doggos in this Pen that combines grid and flexbox for a responsive team page.
Love and Peace
Click the canvas to generate a new design built from the words "Love" and "Peace" by Gerard Ferrandez.
The Password Genie - Vue.js
Nour Soud built a password generator with Vue.js! Slide the length, digits, and symbols selectors to customize the results.