April 2nd: Flowers, Fancy Headers, and Flexagons
#CodePenChallenge: You've Got Mail Roundup
The CodePen community filled our inboxes with great work this week during the You've Got Mail challenge. Here are just a few of our favorite Pens from this week!
Geometric business card with CSS Grid
From design inspiration elsewhere on the internet, Liz re-creates it with modern technologies like CSS grid, flexbox, clip-path, and radial gradient backgrounds. Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/
Drag the roof of the house up to expand the building!Sponsored:
Level Up at Treehouse
Treehouse has courses to help you learn and advance your tech career. Learn things like front-end web development, iOS and Android development, and even game programming.
Jake Albaugh's Pen creates music through repeated chord arpeggios, but which chord plays is based on the colors your webcam sees.
One of the easiest ways to customize your CodePen profile is to drop in the URL of a Pen to use as the header background. We ran across Kelvin Hung's lovely example this week and went around poking for a few more!
Shaw recreates a GIF from the Angular Geometry blog using THREE.js and GSAP.
You might be surprised to find how little code this optical illusion too to create. As Gabriel Cyrillo says, 25 lines of CSS and voilá!
Super-powered layouts with CSS Variables + CSS Grid
Michelle Barker writes: "We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout..."
ohyeah.exe (P5JS ♥ jQuery)
James Hancock creates layers of tables of circles and animates them through p5.js
Go watch a photo be enveloped in a generative SVG flower frame from Steve Gardner. Click again to see a new frame get generated with new random colors.
3D Hex Mosaic
Ivan Juarez N.'s full page tiling of hexagons over a photograph (generated with THREE.js) tilts satisfyingly as you mouse around the page. Each individusal tile also comes to life with color.