123
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.

This week: Text, Tables, and Tricks

CSS is Awesome - Variable Fonts Edition

Mandy Michael gives a demonstration of just how awesome CSS can be with variable fonts!

Feature Flag Management Made Simple

Easily manage and deploy features across different users or segments to get instant feedback on how customers are using it in production.

#CodePenChallenge: Orange and Blue

October's challenge theme is opposites, and we started out with color-wheel opposites orange and blue. Check out the Pens from week one of the challenge, including Jon Kantner's interactive "Image to Orange and Blue Stencil". Thanks zimjs.com for sponsoring!

Tricky Cookie

A playful example of what not to do with your cookie consent modal from Florin Pop, inspired by a Dribbble shot by Ben Paterson.

Bringing Text to Life

Kyle Shook uses a combination of a couple cool CSS tricks and a funky GIF to make Lorem Ipsum dance!

Making Tables Responsive With Minimal CSS

"I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don't do this - just use tables and some simple CSS" from Bradley Taunt.

Jetpack

The ideal way to experience WordPress. Jetpack is a WordPress plugin that provides incredibly useful features like backups, security scanning, image performance, social media integration, Markdown support, and more.

Picture Player

Nick Watton's experiment with the Web Audio API extracts sound from a picture. "Colour values from a selected image slice are mapped against piano key frequencies. The length of contiguous dark lines in the centre section are used to control volume."

CSS Whack-a-Mole

Alvaro Montoro is back with another clever Pen that pushes CSS to its limits! Play whack-a-mole in the browser in this JS-free reproduction of the fun and infuriating carnival game.

CSS-Only Low-Poly Earth Globe (v4)

Joan Perals crafts a globe with trigonometry and CSS. Check out the comments in the code for insight into how it was done.

Emoji Text Generator

Convert your text to emoji dots in this fun Pen built with Vue.js by WebDEasy.

Jagged Little Pill: Issues with Rounded Buttons

Tyler Sticka shares a technique for "pill-shaped buttons that work well across browsers without shrinking our touch targets or clipping any content" in this tutorial post.

Chocolate Chomp

The Keyframers let you take a bite out of the browser in this delicious Pen that demonstrates the fun you can have with CSS clip-path. Check out the description for links to the recorded livestream and more resources.

Range Slider with Dynamic Icons

LeFourbeFromage heats up the humble range slider with some emoji fire in this Less-powered Pen.