July 16th: Drums, Drawings, and Duotone
Duotone filtering w/ CSS variables
"Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters" a great idea with a fun interface from Jhey.Sponsored:
Reinvest Your Time with HelloSign API
G2 Crowd says HelloSign's API is 2x faster to implement than any other eSign provider. What are you going to do with all the time you save?
Headings with Side Lines
"Fun with heading elements and pseudo-element side lines in Sass" from Ryan Mulligan.
"Based on Legend of Zelda, the treasure chest was built in CSS and HTML, using JS to handle CSS Variables" from Antoinette Janus.
Sammy Helali shows you how bitwise operators work in this interactive demonstration.Sponsored:
Get more from your Apple devices at work
Setup, manage and protect your Apple devices in minutes so you can spend your valuable time doing other work.
Slice list items
A satisfying way to slice through a todo list! Aaron Iker recreates this fun micro-interaction from Eddy Gann's Dribbble shot with JS and CSS.
Physics-Based Background Scroll Effects
Will Boyd shows you "how to create nifty physics-based background scroll effects" with Matter.js in this tutorial article.
CodePenChallenge - Forms Roundup - CodePen Blog
The CodePen community found the fun in functional this week and informed us of lots of new possibilities. Check out some of our favorites from the forms challenge prompt!
A mesmerizing spirograph draws itself with impressively realistic pencil lines in this lovely Pen by Mladen Stanojevic.
Website showcase on switching devices
A clever device mockup concept from Creme: click to switch from a mobile layout demo to the desktop version.
Isometric eCommerce CSSGrid
A slick, responsive shop layout with nice hover states from Andy Barefoot.
Build yourself a beat with Stefan C's "WhoDrum 2700". Created with howler.js.
CodePen Radio #182: Browserless
We improved the quality of Pen screenshots on CodePen using a "headless" browser, and we've got Joel Griffith from Browserless on the show to help us talk about how it all works.