Collective #723
Publikováno: 4.8.2022
:has(): the family selector * Vertex Shader Displacement * Svelvet

Inspirational Website of the Week: Repeat
A really cool design with amazing typography and lots of interesting micro interactions and details.

Our Sponsor
Get 33% Off On Our 10th Anniversary
Enjoy our biggest discount ever for the WordPress plugin with the most incredible collection of responsive sliders, hero, website, and special effects templates. (No coding required ever!)

:has(): the family selector
Jhey Tompkins writes about the game changing :has() selector and shows what you can do with it.

kmenu
An animated and accessible command menu. By Harsh Singh.

Quick Tip: Negative Animation Delay
Learn how you can use negative animation delay to create more natural looking animations. By Michelle Barker.

Vertex Shader Displacement
Daniel Velasquz writes about distortion and displacement of geometries.

WEBGi Jewelry Landing Page Demo
An amazing Three.js jewelry landing page for product visualization and configuration using WEBGi. By Anderson Mancini.

Terrain Warp
A wonderful demo made by Ichitaro Masuda.

Faux 3D content scroller
A great CSS trick by Jhey on how to use the mask property to create a faux 3D look.

How to choose an interpolation for your color scale
Natural, quantiles, linear or custom? Lisa Charlotte Muth shows which option ist the best for maps based on continuous (unclassed) and stepped (classed) data.

Finer grained control over CSS transforms with individual transform properties
Learn how to use individual transform properties and several keyframes in this article by Bramus Van Damme and L. David Baron.

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers
Temani Afif shows how to harness the power of implicit grids.

Practical Deep Learning for Coders 2022
Read about the complete from-scratch rewrite of fast.ai’s most popular course, that’s been two years in the making.

CSS border animations
Bramus Van Damme looks at several ways to animate a border in CSS.

Svelvet
Svelvet is a lightweight Svelte component library for building interactive node-based flow diagrams.

Flowful
Boost productivity with procedurally generated ambient music that you can listen to for free.

SecondFounder
SecondFounder is a marketplace where you can sell your side projects.

Cloudscape
Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.

OpenAI API
The OpenAI API can be applied to virtually any task that involves understanding or generating natural language or code.

Hyperspace Text
A super cool hyperspace text demo by Johan Karlsson.

Lyra
Fast, in-memory, typo-tolerant, full-text search engine written in TypeScript

From Our Blog
Inspirational Websites Roundup #40
A fresh set of inspirational websites that have an outstanding design.

From Our Blog
Large Image to Content Page Transition
A simple scroll effect and page transition inspired by Vitalii Burhonskyi’s Dribbble shot.