January 27th: Tab Bars, Trigonometry, and Time
Kristopher Van Sant's animated SVG tribute to the band PPL MVR absolutely rocks! Check out the Pen description for a link to the poster by Martín Ontiveros that inspired the Pen.Sponsored:
The ideal way to experience WordPress. Jetpack is a WordPress plugin that provides incredibly useful features like backups, security scanning, image performance, social media integration, Markdown support, and more.
"Toss" Add to Cart Animation
Toss your shopping right into the cart with Jesse Couch's fun "add to cart" button concept.
Walkers - How to
Louis Hoebregts walks you through the steps for creating "walkers" with p5.js in this interactive & informative Pen.
#CodePenChallenge: Photo Gallery
For week three of the January challenge, we focused on photos! Check out the Pens from the photo gallery prompt, including Stephen Lee's avant garde "Wheel of Dogs".
Corner Ribbon with Trigonometry
Hugo Giraudel takes a mathematical approach to the classic corner ribbon in this detailed blog post, complete with a Pen you can use to generate your own ribbon.
Tabbar Animation - Only CSS
Milan Raring translates a Dribbble shot by Yellow.Y to CSS. Click the buttons on the tab bar to fill the icons with a drop of water.
Staggered Animations with CSS Custom Properties
Paul Herbert writes about how to harness the natural movement of staggered animation for UI in this step-by-step tutorial with helpful embedded Pens.
Cassie Evans paints a lovely bouquet of flowers with "SVG masking and some turbulence filter trickery".
Can You Make a Countdown Timer in Pure CSS?
Chen Hui Jing set out to answer this question, and found that the answer is "yes you can do it in CSS but there’s a much better way". But the process is fascinating anyway! Read on for a journey of discovery through CSS transforms, animations, custom properties, and selectors.
Single Div Challenge
yuanchuan recreates a series of intricate geometric designs in one div each as part of an ongoing Twitter challenge. Check out the Pen description for a link to the thread that inspired the Pen.
Grayscale Color Palette with Equal Contrast Ratios
"Ever needed a grayscale color palette for different surfaces, shadows, or states in your web app? I created a little utility to generate such palette". From Ben Szabo.
Noisy Vertical SVG Lines
Johan Karlsson makes something beautiful from noise in this striking Pen. Click to generate a new pattern, and when you find one you really like, press "d" on your keyboard to download a copy.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!