Collective #728

Inspirational Website of the Week: Elva Design Group
There are just so many things to love about this website: great typography, smooth animations and cool page transitions. Our pick this week.
Get inspired

This content is sponsored via BuySellAds
Your source for candid chats on tech, business and leadership
Hear from Postlight’s senior leadership each week as they dive into everything from running great executive meetings to creating successful product launches.
Listen now

Is it :modal?
Jhey Tompkins introduces a handy CSS pseudo-selector that gives you a way to select elements that are modal.
Read it

Stable Diffusion Is the Most Important AI Art Model Ever
Learn wy Stable Diffusion is such a big deal in this article by Alberto Romero.
Check it out

Critical CSS? Not So Fast!
Harry Roberts writes about how helpful Critical CSS actually is.
Read it

Mini Tokyo 3D
A real-time 3D digital map of Tokyo’s public transport system. A data visualization produced by Akihiko Kusanagi.
Check it out

Watch Pro Series
A fantastic landing page demo in Three.js for a fake Watch Pro 3D visualization. By Anderson Mancini.
Check it out

kmenu
The imporoved library that aims to help create a better user experience with an accessible and faster website navigation.
Check it out

Building the main navigation for a website
A tutorial by Manuel Matuzović that describes how to build an accessible main navigation of a website.
Read it

Next.js Conf
The beautiful web presence of the Next.js conference with some cool refraction interactivity.
Check it out

Visual Studio Code is designed to fracture
A very interesting article by Geoffrey Huntley.
Read it

Three.js Holo Sign
An amazing WebGL demo of a holographic sign by Francesco Michelini.
Check it out

Hacking CSS Animation State and Playback Time
Lu Wang walks through his cool CSS animation project and shows some tricks along the way.
Read it

TIL: You Can Access A User’s Camera with Just HTML
Learn how to use the HTML capture attribute in this article by Austin Gil.
Read it

Simplifying Drag and Drop (Lists and Nested Lists)
Tania Rascia made some very handy demos with drag and drop in React.
Check it out

JSON Crack
Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly.
Check it out

Best YouTube Channels for Front-end Developers
A list of some interesting YouTube channels for front-end developers.
Check it out

PianoChord.io
A place to explore piano chords freely and interactively.
Check it out

D2 Tour (alpha)
D2 is a new declarative language to turn text into diagrams.
Check it out

From Our Blog
3D Perspective Glitch Hover Effect
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy’s website.
Check it out