The 3rd week of the "Animation with GreenSock" challenge got loopy! Browse our collection of Pens from week three, including natszafraniec's colorful loop "Love Hypnosis".
Project Management Has Never Been Easier
Shortcut is made for developers and PMs, providing speedy task management, reporting, and collaboration. Try it for free today!
Grid Items Share Background
Noah Raskin makes clever use of CSS grid to craft a slick catalog-style shopping layout concept. Each department has its own grid item on a shared background image.
CSS (Cascading Style Snowglobe)
Alvaro Montoro let's it snow in this darling CSS snowglobe. Check out the YouTube video linked in the preview for a timelapse of the coding process — plus a little cameo from Alvaro himself inside the snowglobe!
The Persistence of Memory
shirasawa draws inspiration from Salvador Dalí's legendary work to create an interactive layout that juxtaposes elegant typography & a monochrome palette with the psychedelic effect of Dalí's melting clocks.
American Style CSS Building
"Fully responsive American-style CSS building created for my CSS city. I thought it would be much easier to make, but it took me over 4 hours!" From Albert Walicki.
Fake 3D Image
Chris Johnson demonstrates the practical versatility of Three.js with faux-3D on photos. "Processing a depth map image together with a normal image using a fragment shader in order to make a fake 3D image with depth."
The Ultimate Marquee
Magnificode invites Nicolas Cage into a playful example of how to reproduce the (in)famous HTML marquee element effect with CSS. Hover over one of the Cage heads for a surprise.
Josetxu started making tessellations during the July 2021 "Patterns" #CodePenChallenge — and never stopped! This collection features 6 months worth of perfect pure-CSS tessellated patterns.
CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. Like: Drag-and-drop uploading of assets, make anything private with the flip of a toggle, collaborate in real-time with Collab Mode, and a whole lot more!
CodePen Radio #347: Using Notion
Team CodePen's Chris Coyier and Rachel Smith dig into the details of how we use Notion to do just about everything at CodePen, including planning this newsletter you're reading and the podcast they're chatting on!
The Dots vs. The Bars
"Why not both at the same time?" Temani Afif shares a showcase of ten single-div animated CSS loaders made with a combination of dots and bars.
- Bramus shows us how The CSS :has() selector is way more than a “Parent Selector”.
- The U.S. Web Design System shares a tutorial on rapid web prototyping, including handy Pen templates.
- Did you know? You can use the Tailwind Play CDN as an external resource in any Pen!