Inspirational Website of the Week: Monsieur M
An incredibly smooth and fine-tuned design with beautiful creative details. Our pick this week
Customer Journey Smarts
Elevate all your marketing with Mailchimp Smarts – everything from planning and design, to execution and analysis.
:focus-visible Is Here
Fantastic news: Chrome 86 just shipped with support for :focus-visible.
PureCSS Character
Diana Smith made another mind-blowing CSS character and this time, you can adjust some colors!
Developing For The Semantic Web
Frederick O’Brien’s article on the Semantic Web and how to get started with data-fying content.
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.
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.
Radix Icons
A crisp set of 15×15 icons designed by the Modulz team.
Butter Slider
Butter is a simple drag and hold slider with zero dependencies.
Encharm
A wonderful demo of real-time raytracing in WebGL. By Dre.
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.
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.
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.
ZzFXM
ZzFXM is a tiny music generator and toolkit designed for size-limited JavaScript productions.
Free Font: Nafta
A crisp and modern brush marker typeface that embodies free hand drawn shapes combined with bouncy positioning between each letter.
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.
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.
Totem animals
A beautiful WebGL experiment made by ALP Dev.
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!
When fonts fall
In case you missed it: A great deep-dive into font fallback by Marcin Wichary.
Link hover animation
A really nice hover effect made by Aaron Iker.
Logical layout enhancements with flow-relative shorthands
Learn about some new logical property shorthands and new inset properties for Chromium.
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.
Scroll Animations for Image Grids
Some ideas for scroll animations for image grids powered by Locomotive Scroll.
The post Collective #627 appeared first on Codrops.