Collective #655

Inspirational Website of the Week: BLUE HAMHAM
The website of the four music-eating Space Hamster brothers is an absolute winner in every aspect: joyful animations and superb interactions.
Get inspired

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out

Building a Magical 3D button with HTML and CSS
Learn how to build an animated 3D button with HTML and CSS that sparks joy.
Read it

SVG Generators
A complete guide to SVG generators — for everything from SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators.
Read it

Font size is useless; let’s fix it
A great article on the concept of font size, why it’s a problem and how to fix it.
Read it

Developing For Imperfect: Future Proofing CSS Styles
Learn how we can plan future-proof styles in a world with an infinite degree of device and user ability variance.
Read it

Container Queries are actually coming
Read how we’re finally getting container queries and how they will transform UI design, just like media queries did.
Read it

Soccer ball icon speedrun
A great explanatory walk-through explaining one of Marc Edwards’ amazing speedruns.
Check it out

Dark mode in 5 minutes, with inverted lightness variables
Lea Verou shows how to use inverted lightness variables in CSS to create a super-slick Dark Mode option.
Read it

Nailing That Cool Dissolve Transition
Yehonatan Daniv explains how to code a simple, yet stunning dissolve transition for images.
Read it

Best practices for cookie notices
Learn how to optimize cookie notices for performance and usability in this article by Katie Hempenius.
Read it

esoteric.codes
A great site that collects languages, platforms, and systems that break from the norms of computing.
Check it out

Overlay Fact Sheet
An important open letter about accessibility overlays which concludes that “No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk”.
Check it out

Skribbl
Free, hand-drawn illustrations brought to you by a growing community of aspiring creatives.
Check it out

Not Your Typical Horizontal Rules
Sara Soueidan shows a technique for a horizontal rule that is styleable & customizable using CSS, and accessible.
Read it

Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties
A very useful trick by Michelle Barker on how to set styles to a pseudo-element with JavaScript.
Read it

Quick CSS typography tip
A really great tip by Mark Boulton on naming opentype features in CSS.
Check it out

Who has the fastest F1 website in 2021?
The last part in a series looking at the loading performance of F1 websites.
Read it

How to trigger a CSS animation on scroll
A step-by-step tutorial for how to create a CSS animation and trigger it on scroll using the Intersection Observer API. By Nick Ciliak.
Check it out

Under-Engineered Select Menus
Adrian Roselli show how to use CSS to style the <select> element.
Read it

Inspirational Websites Roundup #24
A fresh collection of hand-picked websites with interesting and outstanding designs to get you updated on the current trends.
Check it out

UI Interactions & Animations Roundup #15
A fresh set of hand-picked animation shots that show the current trends in motion and interaction design.
Check it out