Collective #700
Inspirational Website of the Week: Christou 1910 DAYS
Very happy and fresh indeed: a joyful horizontal scrolling design with so many amazing details. We’re in love!
Get inspired
Build Using the DoorDash API
DoorDash Developer allows you to easily integrate delivery services into your website or app. We’ve created the API, you set the rules, offer delivery on your terms and only pay for what you use. And integration is incredibly easy.
Get Started
A Complete Guide to CSS Cascade Layers
A comprehensive guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity. My Miriam Suzanne.
Read it
Calculate the Specificity of a CSS Selector with @bramus/specificity
A way to calculate specificity from within your own JavasScript code. By Bramus Van Damme.
Check it out
CSS Quick Tip: Animating in a newly added element
Learn to leverage the natural behavior of attaching animation via CSS keyframes to reveal new elements. By Stephanie Eckles.
Read it
Painting SVG Paths with Masks
See how Tom Miller made a beautiful painterly effect with SVG paths, an image mask, and GSAP. By Alex Trost.
Read it
IRA Design
With this tool you can build and customize your own illustrations.
Check it out
Include diagrams in your Markdown files with Mermaid
Learn how to use Mermaid, a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.
Read it
Flexbox Dynamic Line Separator
Ahmad Shadeed shows a clever way to use flexbox’s default stretching behavior to create a dynamic line separator.
Read it
MicroWaver 59
A fun game: Fifty-nine seconds of delicious, electromagnetic horsepower. Are you hungry for the future? Insert a coin and wave away inside this hyper-interactive food machine. By Pink Yellow.
Check it out
Add Responsive-Friendly Enhancements to ‘details’ with ‘details-utils’
Zach Leatherman shares some handy add-on utilities to enhance <details> with new features and functionality.
Read it
Infinite Passerella
Infinite Passerella is an infinite fashion show made by Lusion as a Monthly Experiment.
Check it out
Using mask as clip-path
Yuan Chuan explains how to use mask rather than clip-path to “clip” elements in a responsive manner.
Read it
Control CSS cascade with cascade layers
David Omotayo writes how to use the CSS cascade layers @layer at-rule to address conflicts between selector specificity and order of appearance.
Read it
Shaders and Gradients
The second issue of Offscreen Canvas is about learning shaders and explores why gradients are so important, and more.
Read it
Super Mario Scrollable Timeline
A fantastic horizontal scrolling timeline of Super Mario made by Adam Kuhn.
Check it out
MonoLisa
A font family designed for software developers.
Check it out
Google Search Is Dying
A very interesting article on how Reddit is currently the most popular search engine and how Google Search is not working anymore the way it should.
Check it out
Jigglypuff (づ｡◕‿‿◕｡)づ ♫ ♫ ♫
A super-cute demo by Nico Fonseca.
Check it out
An Auto-Filling CSS Grid With Max Columns of a Minimum Size
Mike Herchel shares a new auto-filling CSS Grid technique used within the Drupal 10 core.
Read it
In case you didn’t know about it: jless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data.
Check it out
Inspirational Websites Roundup #34
A fresh collection of new websites to get you up-to-date with the latest web design trends and inspire you.
Check it out
Noise Pattern Reconstruction from Monopo Studio
In this coding tutorial you learn how to recreate the noise pattern seen on the Monopo Studio website using Three.js
Check it out
Repetition Image Hover Effects
A simple and fun hover effect with repeated image layers that get scaled up and down.
Check it out