October 22nd: Mines, Mazes, and Morphing
The Mine: No JS, CSS only adventure game
Jamie Coulter's incredible, playable Pen pushes checkboxes well beyond the limit. "The concept initially started off as a simple 'Walk down a corridor and avoid traps' game, but it just kinda escalated from there. I decided i wanted to go up and down, solve puzzles etc."Sponsored:
Save time. Wow clients. Any website.
100s of modular features for any website or web app. Build fast, beautiful sites without reinventing the wheel.
No bones about it, the CodePen community knows what to do with a challenge! Check out the Pens from the Halloween challenge's skeleton prompt, including Mariana's creepy selfie camera!
Claudia translates a Dribbble shot by Nanna Paskesen into CSS. "Arctic seals: curious and shy. If you get too close with your mouse they will try to escape".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.
A gallery of code snippets for shapes generated with CSS background gradients, from yuanchuan.
CodePen Radio #195: Cypress
Chris, Alex, and Marie are here to talk about how we've started testing with Cypress. We talk about the kind of testing we do at CodePen, where the need for it came from, and what our experience has been like using Cypress so far.
Double Ninth Festival
Yiting Liu commemorates the festival with a beautiful SVG illustration.
"CSS progress bars made with svg patterns" from lucagez. Hover over the bars to watch them fill with their patterns.
100 Days CSS Challenge
Matthias Martin posts a daily design prompt and a starter Pen template, and you can submit your Pen to show off right on the site!
Katherine Kato shares a " minimal 'About' page layout of a fictional author".
"Recursive maze generation and hand-on-the-wall pathfind" from Rafael Castro Couto.
Image Tile Rotator
Jake Albaugh takes an image, breaks it up into chunky tiles, and rotates the tiles at random for a bizarrely pixelated effect.
Border Radius Morphing
"Just an experiment with multi step border-radius values and background-positioning" from Mattia Astorino.