Inspirational Website of the Week: Léonard – Inventive Agency
Creative and unique with wonderful typography and soft effects. Our pick this week.
BugHerd: the easiest way to track bugs & manage website feedback
Get feedback that’s visual not vague. Pin feedback to elements on a website and capture the technical information to help replicate bugs and solve issues.
Annual Awards 2020
Find out who 2020’s best designers, developers, studios and agencies are.
Create Responsive Image Effects With CSS Gradients And aspect-ratio
Stephanie Eckles explains how to use the new `aspect-ratio` property in combination with `object-fit` in order to maintain the aspect ratio of images across related components.
The Future of CSS: Scroll-Linked Animations with @scroll-timeline
Bramus experiments with the upcoming Scroll-linked Animations Specification that defines a way for creating animations that are linked to a scroll offset of a scroll container.
Blobmixer
A fantastic toy for creating and sharing 3D blobs.
SVG Repo
Search more than 300.000 mono or multi color vectors for commercial use.
What the heck, z-index??
Josh W Comeau explores stacking contexts, one of the most misunderstood mechanisms in CSS.
Getting Deep into Shadows
A great article by Rob O’Leary where he shares many interesting things about shadows.
Diving into the ::before and ::after Pseudo-Elements
An in-depth look at pseudo elements and how to use them to solve interesting CSS problems.
Symphosizer
A really cool sound activated typographic instrument.
Streams — The definitive guide
Learn how to use readable, writable, and transform streams with the Streams API. By Thomas Steiner.
Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers
A tutorial by Ben Frain that covers a modern way of automatically creating a table of contents for a blog post that updates with a ‘current position’ indicator.
Debugging layout repaint issues triggered by CSS Transition
Dzhavat Ushev shares some valuable insight on a repaint issue caused by a hover transition.
SVG: The Good, the Bad and the Ugly
A very interesting article about SVG, what its problems are and how a better solution would look like.
Ray.so
Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.
Hiding Content Responsibly
Hugo Giraudel discusses all the ways to hide something, be it through HTML or CSS, and when to use which.
Veloren
Veloren is a multiplayer voxel RPG written in Rust. The game is in an early stage of development, but is playable.
State of Design 2021
1,000 designers shared how they work, what they value, and what kinds of challenges they’re facing.
How to Create a Diverging Bar Chart with a JavaScript Charting Library
A tutorial by Shachee Swadia that will teach you how to create an interactive diverging bar chart.
Experience Japan Pictograms
A novel set of visual symbols developed for people of all cultures and ages to enhance their tourism experience in Japan.
Maximally optimizing image loading for the web in 2021
In case you missed it: Learn 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders
A tutorial explaining how to build an infinite circular gallery that can be dragged and scrolled using WebGL with OGL and GLSL Shaders.
The post Collective #650 appeared first on Codrops.