cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

June 12th: Generated Cities, Responsive Buses, and CSS Custom Properties

The "Best" Volume Sliders

Inspired by a Reddit thread, the CodePen community came through with hilarious demos of the "best" ways to implement a volume slider.

Learn UX Design online, with an expert mentor. Build your portfolio.

Springboard's self-paced course with 1-on-1 mentorship will help you understand users better & build products they love. BONUS: enroll now & get a 1 yr. subscription to Lynda.com, worth $240!

Responsive CSS VW Buses

Marcus Connor's faithful reproductions of classic VW buses look great at any size!

Slack Theming with CSS Custom Properties

Stephanie "Recreated the native theming functionality in Slack with CSS custom properties and...a bit of magic". Make sure to check out her blog post about how she made it (link in the Pen description).

little iso city generator

Every time you click, Nicolas Barradeau's Pen generates another little cityscape with brilliant texture and splashes of vivid color.

ThreeJS 012

"A ThreeJS, spinning, rotating VueJS logo. Ironically with not a scrap of VueJS code", from Drew Powers.

CodePen Radio #133: Mike Mangialardi

On the latest CodePen Radio, we talk to Mike Mangialardi from codingartist.io about his Daily CSS Images challenge!

Interactive Type + Code with Google Fonts

Lionel Radisson's Pen blends Google Fonts with his signature navy and red color pallete into an animated kaleidoscope of lettering.

CSS-Only Monument Valley 2 Totem

Gabrielle Wee's animated Monument Valley 2 totem is watching you ;)

Learn RxJS by Examples

In this tutorial post, Stoyan Delev uses CodePen to demonstrate how to use RxJS for animations and transitions between pages triggered by user’s input.

in the sea

K-T is back with another soothing scene of nature. Slide the screen to see two sides of what's going on in the sea.

termynal.js: A lightweight and modern animated terminal window

"Termynal lets you write all input and output in plain HTML, and all styling in plain CSS. Non-JS users will still see the complete code, just no animation." from Ines Montani