January 28th: Toys, Games, and Pets
Yuanchuan shares a set of striking patterns created with the css-doodle web component and radial-gradient.Sponsored:
400+ pre-built websites in 1 theme
Get access to the largest gallery of pre-built websites ever created! Join over 300,000 people who chose Be Theme for their design projects. You can’t go wrong with this ThemeForest top 3 bestseller.
#CodePenChallenge: Color Pop
The CodePen community made shocking pink POP in the third week of the Color Palettes challenge! Check out the Pens from the challenge, including Janet Mendez's "Color Pop Cassette".
Interaction of Color, Plate XXIV-1, The Goethe Triangle
"Adapted from Josef Albers' book 'Interaction of Color' -- the Goethe color triangle showing primary, secondary, and tertiary colors. Also, fun with SASS math and functions" from Nora Brown.Sponsored:
Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.
CSS LEGO Minifigure Maker
A little bit of #LegoLove from Josh Bader: "Swap heads, change colors, take it apart, and rebuild it!"
Katherine Kato went retro and "recreated some WordArt in pure CSS! You can type your own text and the text style changes based on the style you choose".
CodePen Radio #207: Prefill Embeds
Stephen, Marie, and Chris are on to introduce you to the newest feature on CodePen: Prefill embeds.
Focus Styling: Walkthrough
"One of the most significant things you can do to improve the accessibility of your work is to create highly visible focus indicators." Derek Featherstone walks you through accessible focus styling in this interactive tutorial Pen.
Cartoonifying and Animating a Still Photograph
Alvaro Montoro "created an animation of bats flying over people on a bridge using a single element and a still picture" and shares the process in this detailed post with lots of helpful references.
Sabine Robart on CodePen
Isn't a color-coordinated showcase fun? Peruse the pleasingly purple profile of web development student Sabine Robart.
Test your hex color recognition skills in this rather difficult game of hangman "built with React, React Hooks and styled-components" by jh3y.
Dog is Long
"Lengthen this dog as much as you please, but he’ll never be longer than Longcat, the longest cat on the Internet" from Jon Kantner.
CSS Grid Scrabble Board
Hit a triple word score on Bobby Korec's replica of the Scrabble board, built with CSS Grid.