Typesetting Hovers

Hover over the Georgia and Roboto type in Daniel Constance's demo and see a dirty underbelly, all Comic Sans! This is a wonderfully fun take on this week's typesetting challenge.

CSS Blend Mode Fire

Jon Kantner was experimenting with SpriteKit fire particles in Xcode, and thought of taking the idea to CSS with`mix-blend-mode`.

@keyframes 1.9.3 | Solar Eclipse Loader

In one recent episode of the @keyframers, they build a whole bunch of CSS loader animations, this being one of them. Inspiration found from a Dribbble shot by Paulius Kairevicius.

Sponsored:

Jetpack

A WordPress plugin that provides hassle-free design, marketing, and security — all in one place. The ideal way to experience WordPress.

Worms

John W. Long created some little creepy crawling dots using p5.js on a canvas and only about 40 lines of code.

Sponsored:

​No Barriers, Get FREE Solutions!

No matter where you are in your development career, we've got the tools to help you grow. Get Your FREE Tools!

New CSS Techniques at the Component Level, Part 1 of 2: CSS Grid

"To illustrate how useful Grid is for more granular layout needs, let’s use the example of a card component, which is often used for lists of news items or blog posts."

Dendrite

A wonderful fractal design by Peter Liepa in ~60 lines of code using regl ("Functional WebGL").

Spaghetti Audio

The instrument nobody asked for, but everybody needed... Flip your speakers on for this web audio Pen by Joe Harry.

Easy Toggle State

Every demo for this library (which focuses on toggling state, something us front-end devs to constantly) can open in a new Pen using the CodePen Prefill API.

Pacman Canvas + TweenMax

A very impressive remake from Majer Wu!

input :not(:placeholder-shown)

The logic to make floating labels work (i.e. float the label when the input is either focused or has any value) is made very easy and doable entirely in CSS with this tricky selector, made very clear by Andreas Storm.

CSS Panning Perspective Plane

A linear gradient paints this floor by Zack. Then rotations and translates transform the movement.

cloud

Make sure to check out the rest of Chaz' Pens as well. All kinds of clever UI and artistic work in there.