May 4th: Selection, Sound, and the Sea
In Too Deep
"Playing with perceived depth and neon reflections. Using an isometric angle to start and fading in typography" from Alex Trost.Sponsored:
A NoSQL Original Series
Binge or livestream episodes with your Cassandra heroes! Topics include NoSQL, Kubernetes, Apache Kafka & more. Sign up now!
Pure Responsive CSS Snorlax
Jhey shares a snoozin' Snorlax illustrated with CSS.
Using CSS to Control Text Selection
Will Boyd gets into the nuts and bolts of text selection with CSS in this tutorial post with lots of helpful embedded Pens.
Luke Lincoln creates a Tamagotchi-style pet cat that ambles around and snoozes. Check out the JS panel to get a peek at how the cat was drawn!
ZzFX Sound Board
Only CSS: Garden Eels
Practice being seen by an array of shy garden eels with this playful animated Pen from Yusuke Nakaya.
#CodePenChallenge: User-Uploaded Avatars
For the final week of the April images challenge, we wrangled user-uploaded images of different sizes to look good together as a group. Check out our Collection of Pens from the challenge, including Kyle Wetton's "Dynamic, Color-Sniffing Cards".
CodePen Radio #266: Rubber Ducking
It is rubber duck season! As we all spend a lot more time on our own, team CodePen and the CodePen community are squashing bugs with the "rubber ducking" technique for breaking down complex problems. Goofy name, but it really works!
Sarah Fossheim illustrates a shiny new Switch with CSS. Check out those buttons!Sponsored:
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!
Chris Gannon pays tribute to video artist Lucas Zanotto with an SVG recreation of "Balancing Moods".
"Fish are generated and animated randomly. Lots of trigonometry to determine the distance travelled between 2 points and the angle to turn. Using anchor tags means the fish can be focused so can be activated by keyboard control too" from Chris Smith.
Text Fill on Hover #1
G Rohit demonstrates a text fill effect on hover with examples of how it looks in larger header and smaller navigation text.