Collective #627
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_WOTW.jpg)
Inspirational Website of the Week: Monsieur M
An incredibly smooth and fine-tuned design with beautiful creative details. Our pick this week
Get inspired
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/Mailchimp2.jpg)
Customer Journey Smarts
Elevate all your marketing with Mailchimp Smarts – everything from planning and design, to execution and analysis.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_focus.jpg)
:focus-visible Is Here
Fantastic news: Chrome 86 just shipped with support for :focus-visible.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_csspainting.jpg)
PureCSS Character
Diana Smith made another mind-blowing CSS character and this time, you can adjust some colors!
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_aaron.jpg)
Developing For The Semantic Web
Frederick O’Brien’s article on the Semantic Web and how to get started with data-fying content.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_clamp.jpg)
min(), max(), and clamp(): three logical CSS functions to use today
Una Kravets explains to control element sizing, maintain proper spacing, and implement fluid typography using the min, max, and clamp functions.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_huluween.jpg)
Huluween – The Screamlands
Take a trip to Huluween’s The Screamlands — a hair-raising, haunted house experience that will make your wildest nightmares come true. Fantastic work by Active Theory.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_icons.jpg)
Radix Icons
A crisp set of 15×15 icons designed by the Modulz team.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_slider.jpg)
Butter Slider
Butter is a simple drag and hold slider with zero dependencies.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_encharm.jpg)
Encharm
A wonderful demo of real-time raytracing in WebGL. By Dre.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_var.jpg)
The –var: ; hack to toggle multiple values with one custom property
Lea Verou explains a very interesting trick to turn multiple different values on and off across multiple different CSS properties.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_cls.jpg)
Cumulative Layout Shift in Practice
Learn all about the Cumulative Layout Shift (CLS), the user experience metric that measures how unstable content is for your visitors.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_webpack.jpg)
Webpack Tutorial: How to Set Up webpack 5 from Scratch
Tania Rascia’s super-useful guide where you’ll learn how to use webpack to bundle JavaScript, images, fonts, and styles for the web and set up a development server.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_music.jpg)
ZzFXM
ZzFXM is a tiny music generator and toolkit designed for size-limited JavaScript productions.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_nafta.jpg)
Free Font: Nafta
A crisp and modern brush marker typeface that embodies free hand drawn shapes combined with bouncy positioning between each letter.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_complexity.jpg)
Cheating Entropy with Native Web Technologies
Some very interesting thoughts by Jim Nielsen on how web tooling introduces a whole new layer of complexity that needs to be maintained.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_acc.jpg)
Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
Manuel Matuzovi?’s second article in a series where he explores user preferences and how to respect them when writing CSS.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_totem.jpg)
Totem animals
A beautiful WebGL experiment made by ALP Dev.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/Screen-Shot-2020-10-15-at-15.33.26.jpg)
Pi-Slices
Pi-Slices is a GIF artist who has made a 3D animated GIF every day more than 6 years. Some great coding inspiration!
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_fontfallback.jpg)
When fonts fall
In case you missed it: A great deep-dive into font fallback by Marcin Wichary.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_linkhover.jpg)
Link hover animation
A really nice hover effect made by Aaron Iker.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_logical.jpg)
Logical layout enhancements with flow-relative shorthands
Learn about some new logical property shorthands and new inset properties for Chromium.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_mouse.jpg)
Coding the Mouse Particle Effect from Mark Appleby’s Website
Learn how to create the mouse particle effect from Mark Appleby’s website in this ALL YOUR HTML episode.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/10/C627_gridlocomotive.jpg)
Scroll Animations for Image Grids
Some ideas for scroll animations for image grids powered by Locomotive Scroll.
Check it out