The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

January 27th: Tab Bars, Trigonometry, and Time

PPL MVR

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.

Jetpack

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.

Flowers

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.

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!