Collective #392

Inspirational Website of the Week: Robin Payot
Some fascinating interaction ideas with a futuristic design. Our pick this week.
Get inspired
Design, Develop and Test Your Apps with
Ext JS
Build better apps faster with a single, enterprise-ready framework, complete with a robust UI component library that's fully supported.
Try it for free
Stunning hover effects with CSS variables
Tobias Reich shows how to use CSS variables for creating magic button effects.
Read it
Avoiding chaos when using Flexbox 'order'
Amelia Bellamy-Royds explains the CSS flexbox "order" property and shows how to use it.
Read it
GitLeaks
A tool that searches repositories for sensitive information.
Check it out
Exploring ES2018 and ES2019
Axel Rauschmayer writes about what's new in ECMAScript 2018 and ECMAScript 2019.
Read it
Free Intro to Web Development slides (with demos)
Read about Lea Verou's slides on the "User Interface Design & Implementation" course she teaches at the MIT.
Read it
Stinkmoji
Brilliant three.js fun where you can control the facial expressions of an emoji.
Check it out
Ikko Tanaka
Ikko Tanaka's graphic design in CSS handcrafted by Yuan Chuan.
Check it out
Scroll and morph
In this demo Mikael Ainalem shows how to use basicScroll, CSS variables and clip-path to morph shapes.
Check it out
Styling Empty Cells With Generated Content And CSS Grid Layout
Rachel Andrews shows how to style grid cells that don't contain any content with pseudo classes.
Read it
Animated SVG Avatar
An adorable login form where the avatar responds to the input fields.
Check it out
Combine Flexbox & Grid in a common layout made easy
Jen Simmons shows how you can nest CSS Flexbox and Grid to make flexible layouts.
Watch it
GIFMUSE.io
If you didn't know it yet: A curated gallery of micro animations that elevate the animated GIF as artistic work.
Check it out
Revisiting Margin Collapse
A great article on the logic and usefulness of collapsing margins in CSS. By Adam Laki.
Read it
Learn CSS Variables in 5 minutes
Per Harald Borgen's quick introduction to Custom Properties.
Read it
CSS Illustration 'Woman'
Beautiful CSS art made by WhitePallet.
Check it out
How Products Got Their Name
An interesting collection of products and projects and the stories of how they got their name.
Check it out
FastPhotoStyle
The intriguing fast photorealistic style transfer algorithm that transfers the style of one image to another.
Check it out
Webgl Particle Audio Visualizer
A WebGL particle experiment that reacts to audio input by using the WebAudio API. Made by Sehyun Av Kim.
Check it out
Mario Pixel Icon Collection (AI, PNG, SVG)
An awesome playful pixel icon set with 100 versatile icons.
Get it
Fluid Simulation
A three.js demo that simulates fluid with volumetric lighting. Made by David Lenaerts.
Check it out
3D iMacs
A nice scrollable 3D iMacs presentation with parallax effect just with CSS. Made by Thismanslife.
Check it out