December 23rd: Traffic, Typefaces, and Tutorials
Choose Your Perfect Typeface for Christmas
Grab a typeface for your holiday Pens and virtual Christmas cards from this curated selection by Paulina Hetman.Sponsored:
Get A Free .design Domain Name Today!
.design reflects what you do as a designer. Your name comes with free email hosting, SSL Security, & a Site Builder trial.
HSL Dimmer Switch
jh3y wants you to show you the light with HSL! "Everything is being powered through a --light CSS property. And that means we can also have dimming. Grab the handle and rotate for dimming, tap to switch the light on and off".
#CodePenChallenge: No Preview
The third week of the December #CodePenChallenge is the toughest one to crack! We started you off with an egg-cellent design and it was up to you to recreate it without looking at your preview panel. Check out the valiant efforts from this challenge in our collection.
Toggle between the expected traffic and the actual traffic over a period of 12 days in Ile-de-France in this interactive Pen built with React by Gabriele Corti.Sponsored:
Join the 34% of the internet already using WordPress and build your site there, where you won't have to worry about security, spam, upgrading software, and all that technical debt. You can start your blog, build a portfolio, or even open a store!
Team CodePen had a busy year! In this Pen we take a look back at the new features and infrastructure changes we made in 2019 to make CodePen better. Here's to 2020!
Animated Night Hill Illustration - Pure CSS
Aybüke Ceylan translates Yup Nguyen's Dribbble shot to CSS to create a peaceful nighttime scene.
"A snowflake generator, making a unique snowflake every couple of seconds. Code builds a single arm, then generates copies from same data. Just like in nature, they are not quite symmetrical (it's a feature, not a bug)" from Nick Watton.
Florin Pop is on day 96 of his 100 Days, 100 Projects challenge! This fun Pen is #96. Click any dot in the grid to start a wave. And, check out the link in the Pen to learn more about the challenge.
Birthday Input with Zodiac
Aaron Iker adds a bit of astrological flair to a date input field. Enter a birthdate and the field decorates itself with an emoji-style icon representing the zodiac sign for that date.
Bacteria Growth Simulation
A CSS-Only Carousel Slider
Sliders in CSS have come a long way! Christian Schaefer demonstrates the potential of CSS Scroll Snap in this Pen. Pop it open in Canary for a glimpse of the auto-forwarding future.
The Basics of CSS - Block Elements Cheatsheet
"The basics of CSS is a series of cheatsheets that help you understand basic concepts of CSS. In this cheatsheet we learn behavior of block elements" from Stas Melnikov.