July 2nd: Synths, Solids, and Sun
Only CSS: Mt. Fuji
A beautiful CSS illustration of Mt. Fuji with a popup book feel from Yusuke Nakaya.Sponsored:
Delightful Realtime Apps with Channels
Powerful features, 40+ SDKs supported, 150+ tutorials available and the support you need. Generous free plan. Get started today.
Infinitely Drawing Icons
"Using SVG line animation to infinitely draw the outline of connected icons. This outline together with a couple of additional lines create a loader which cycles icons" from Mikael Ainalem.
CSS Shapes, Columns and Clipping
An experimentation with CSS columns, CSS shapes, clip-path and background-clip, bedecked with roses, from Mandy Michael.Sponsored:
Easily Manage Your Apple Devices Free
Jamf Now is a device management solution for the iPad, iPhone and Mac devices at work. Make IT tasks simple and affordable, so you can support your users!
1 Element CSS Spinners
Need a spinner? Grab one from this 8 pack of minimal CSS spinners from Paolo Duzioni.
CodePenChallenge: Menus Roundup
The CodePen community served up some wonderful Pens for the final week of the June challenge! Have a look at what was on the menu, and get ready for July's challenge.
ARIA Busy Loading Animation
Adrian Roselli demonstrates how to use the aria-busy attribute to make a loading animation accessible: "changing it from true to false is not only a CSS hook, but imparts accessibility benefits for users".
A series of four sweet treats, all drawn in CSS by agathaco!
Live Coding Synth Tester A
Team CodePen's very own Jake Albaugh demonstrates how to use Tone.js on CodePen in an in-depth, two-part tutorial video.
A new hypnotic, geometric Pen from Dave DeSandro's Round 3D collection.
Alfa Romeo 1969
Kristina Dinellari translates a Dribbble shot by Varun Kumar into CSS in this groovy Pen!
Sun Rise Moon Rise
"Sun and moon rising and setting. The animation uses the date/time to control the height above the horizon of the moon or sun depending on the time of day. You can also press the toggle switch to control the animation using the slider" from Adam Walker.
Christina Gorton experimented with GSAP to create a colorful and cheerful hummingbird loader.