December 24th: Shadows, Shelves, and Snowmen
Snowman CSS Project
A holly jolly CSS illustration with lots of painterly details from Heather Shar.Sponsored:
React for Beginners
It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!
The CodePen community was on fire with last week's challenge! Check out the Pens from the fire prompt, including Jamie Coulter's incredible box-shadow only pixel art campfire.
CSS Grid: A Shelf!
Oliviale continues a series of CSS grid experiments with a set of responsive shelves. Resize the browser to see the shelves reconfigure themselves to fit.
Cast Shadow Visualization
Scott Kennedy demonstrates the box-shadow property with this interactive Pen. Slide the slider to experiment with different offsets and blur radii.
CodePen Radio #204: Sidebar Engineering
In part 2 of our discussion of our new sidebar, Cassidy, Rachel, and Marie are on to talk about the development side of building out the sidebar.
Native accordion with <details>
"Making the native html <details> element behave like a typical collapsible accordion with smooth animations" from Giana Blantin.
Waiting for pizza is fun with this deliciously playful animated loader from Chris Gannon.
Fun CodePen Tricks
Ben Szabo shares some tips for customizing your CodePen profile, including some clever attribute styling, in this informative blog post.
VHS Retro Style
Creme brings the scan lines and pixelated text of the VHS experience to the browser in this throwback Pen.
GSAP New Year Countdown Clock
A "simple and sleek" New Year countdown animation from Animated Creativity.
FlyIn Movie Title
Vulid brings the drama of cinema title sequences to the browser in this entertaining Pen.
Raul Dronca uses clip-path to shape the borders of a gif in this clever experiment.Sponsored:
Go PRO on CodePen
Unlock the full power of CodePen with features like private content, asset uploading, live view, and embed themes.