July 15th: Escapes, Snacks, and Jokes
Dither / Dissolve CSS Gradients
"Mixing noise with CSS gradients helps to remove banding, but results in an overall grainy texture. By overlaying gradients and applying masks the dithering can be controlled to affect the areas where colours blend only" from David J. Aldred.Sponsored:
Build Scalable Feeds, Activity Streams & Chat
Stream’s simple, powerful APIs are used by some of the largest and most popular apps for feeds and chat. Save months of development headache and focus on what makes your app unique.
Ananya Neogi shares a showcase of fun things you can do with CSS outline. Think about the pixel-art possibilities of outline-style: dashed.
#CodePenChallenge: Dad Jokes
We made a lot of dad jokes, and the groans were heard 'round the world during week two of the July 2019 APIs challenge. Check out the cheeky Pens from the challenge, including Adam Kuhn's "Fwd: Hilarity". Thanks to our sponsor, getstream.io
Space Oddity App
Lee Martin's celebration of the 50th anniversary of David Bowie's "Space Oddity" got its start right here on CodePen! Snap a pic of the moon and you'll hear a new mix of the tune.
CodePen Radio 229: Vulnerability
Cassidy and Marie are talking vulnerability: at work, in software, and IN work ON software. What does vulnerability in work look like? And how putting yourself out there can be a great way to help you grow.Sponsored:
Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.
Background Focal Point
Christophor Wilson demonstrates how to set the CSS background image's focal point with Vue.js.
Find and solve all the puzzles to escape from the room in this incredibly fun Pen from the members of Kristopher Van Sant's #PassThePen community.
[CSS Grid] Swiss-Style Typography Poster 06
Henry Desroches continues an exploration of Swiss style in CSS grid with "a [mostly] CSS implementation of Jacqueline Casey's stunning poster for MIT!"
The Keyframers tour the solar system with transition between number values, text animation and a circular SVG navigation! Check out the video link in the description to play back the livestream.
Three.js - Scroll for Hot Dogs
You can learn a lot from doing goofy things! hellogareth decided to give Three.js a shot, and cooked up this hot dog scroller.
Zdog - NES Shroom
Just a lil Mario Mushroom from ilithya, with drag to rotate interaction from Zdog.
CSS Open Store Animation
marianab shares a charming loading animation concept for building an online store.