June 18th: Selectors, Spaghetti, and State
@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.
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`.
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.
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.