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