This week: Soda, Stickers, and Stats
Stable Coded & Codeless Tests-Start Free
Fast authoring of AI-stabilized cross-browser UI tests. Reduce maintenance with automated tests that adjust with code changes. Start free!
Interactive Soft Drink Lid
"A realistic interactive plastic lid made with checkboxes and CSS. The bubbles can even become slightly worn after being pressed once!" From Jon Kantner.
#CodePenChallenge: Take on Me
August's challenge theme is music video color palettes, and we kicked it off with a muted palette from the 80s hit "Take on Me". Check out the Pens from the challenge, including Adam Kuhn's "Take Me On", that pulls you in through your webcam!
UI Design: Stats Dashboard
"When your friend recommended you that series, you should've said no." Olivia Ng visualizes some jaw-dropping binge watch stats in style.
The Girl With A p̶e̶a̶r̶l̶ CSS Earring
"This is an experiment to push myself to re-create Vermeer's Girl With A Pearl Earring with CSS. No SVG's were harmed in the making of this". From Louise Flanagan.
Illustration Online Store
Håvard Brynjulfsen shares a super-clean store design concept that puts the focus on the art!Sponsored:
WordPress.com now has SFTP and Database Access
In the past, needing to edit the files in themes may have been a reason not to choose to put your site on WordPress.com. No more. If you're on the Business or eCommerce plans, you have direct access to your site's database (via phpMyAdmin) and files (via SFTP). You can also install plugins, giving you as much control over your WordPress site as you'd likely ever need.
CodePen Radio #279: Mini-Releases
Dee, Stephen and Marie talk about CodePen’s evolving strategy of releasing mini features and updates rather than waiting for a big, mega update. They also talk about using feature flagging to test new features with specific users, and how to avoid building "the Homer car" with a minimum viable product mentality.
🐳agathaco's adorable animated SVG whale lets out a stream of particles when you click it!
"A hummingbird drawn in HTML and CSS using semicircles (although cheating a little bit by stretching and rotating them)." By Alvaro Montoro, inspired by Dribbble shots by Ivan Bobrov.
"A reusable .sticker with CSS variables to adjust the gradient colors and the shine angle" from Stephanie Eckles.
GSAP ScrollTrigger - Marquee Page Border
"You'll never believe how chill it is!" Scroll your way through Ryan Mulligan's Pen and become more chill while the article headings marquee their way around the border.
CSS Scrolling Phone
Octavector's creates an endlessly scrolling (and blissfully silent) phone with CSS!