This week: Tables, Ladders, and Blocks
CSS Snake & Ladders
Northwestern MS in Info Design+Strategy
Learn to use research and analytics to drive communication strategies and to translate complex data into compelling visuals and narratives.
Roller coaster loader
Take a ride on a minimal CSS roller coaster from Comehope!
A second gateway to the sea
"A css3D model of the sculpture made by Sabina Lang and Daniel Baumann" from Thibaud Goiffon.Sponsored:
350+ Pre-Built Websites With a One-Click Installation
Be Theme has more than 350 pre-built websites. You can select a pre-built website that will work for you in minutes, and install it with a single click in less than a second.
Mystery Block Text
Dario Corsi "styled some text based on a popular plumbing game". Don't forget to click the boxes to gather your coins!
Periodic Table of Elements - HTML/CSS
A neon periodic table from Mike Golus. Click a title to highlight sections of the table. "I created this project to familiarize myself with PUG and Sass and had a ton of fun doing it."
CodePen Radio #185: All-Hands
Team CodePen got together in person for an all hands meeting to plan out a new feature, and we all got together for a podcast to talk about our experience going from remote to in-person for a week.
CSS Illustration #1 - Bicycle
A striking red-on-black bicycling scene in CSS from Albert Feynman.
Creating an Animated SVG Neon Light Effect
Nils Binder shows you how to create a flickering neon sign, taking it "from Illustrator to Sketch to SVG" in this detailed tutorial post with embedded Pens.
feTurbulence, feColorMatrix, feDisplacementMap
Yoksel demonstrates how to use SVG elements to create a rainbow-hued flame in this dazzling Pen.
"A flamingo brought into existence thanks to the mystical powers of CSS" by Octavector.
Fake 3D effect with depth map
Robin Delaporte "fakes" 3D on a still image. Hover over the pug to check out the (slightly eerie) motion effect.