Collective #650
![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_WOTW.jpg?x25555)
Inspirational Website of the Week: Léonard - Inventive Agency
Creative and unique with wonderful typography and soft effects. Our pick this week.
Get inspired![Bugherd](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/Bugherd.png?x25555)
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.
Try it free![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_awwwards.jpg?x25555)
Annual Awards 2020
Find out who 2020's best designers, developers, studios and agencies are.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_aspect.jpg?x25555)
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.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_scroll.jpg?x25555)
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.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_blob.jpg?x25555)
Blobmixer
A fantastic toy for creating and sharing 3D blobs.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_svgs.jpg?x25555)
SVG Repo
Search more than 300.000 mono or multi color vectors for commercial use.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_zindex.jpg?x25555)
What the heck, z-index??
Josh W Comeau explores stacking contexts, one of the most misunderstood mechanisms in CSS.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_shadow.jpg?x25555)
Getting Deep into Shadows
A great article by Rob O'Leary where he shares many interesting things about shadows.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_pseudo.jpg?x25555)
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.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_instrument.jpg?x25555)
Symphosizer
A really cool sound activated typographic instrument.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_stream.jpg?x25555)
Streams — The definitive guide
Learn how to use readable, writable, and transform streams with the Streams API. By Thomas Steiner.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_nav.jpg?x25555)
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.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_repaint.jpg?x25555)
Debugging layout repaint issues triggered by CSS Transition
Dzhavat Ushev shares some valuable insight on a repaint issue caused by a hover transition.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_SVG.jpg?x25555)
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.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_code.jpg?x25555)
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.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_hide.jpg?x25555)
Hiding Content Responsibly
Hugo Giraudel discusses all the ways to hide something, be it through HTML or CSS, and when to use which.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_game.jpg?x25555)
Veloren
Veloren is a multiplayer voxel RPG written in Rust. The game is in an early stage of development, but is playable.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_design.jpg?x25555)
State of Design 2021
1,000 designers shared how they work, what they value, and what kinds of challenges they’re facing.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_chart.jpg?x25555)
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.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_japan.jpg?x25555)
Experience Japan Pictograms
A novel set of visual symbols developed for people of all cultures and ages to enhance their tourism experience in Japan.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_imageloading.jpg?x25555)
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.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/02/C650_circular.jpg?x25555)
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.
Check it out