Collective #700
Publikováno: 24.2.2022
A Complete Guide to CSS Cascade Layers * Painting SVG Paths with Masks * MonoLisa * Shaders and Gradients
The post Collective #700 appeared first on Codrops.
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!
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.
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.
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.
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.
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.
IRA Design
With this tool you can build and customize your own illustrations.
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.
Flexbox Dynamic Line Separator
Ahmad Shadeed shows a clever way to use flexbox’s default stretching behavior to create a dynamic line separator.
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.
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.
Infinite Passerella
Infinite Passerella is an infinite fashion show made by Lusion as a Monthly Experiment.
Using mask as clip-path
Yuan Chuan explains how to use mask rather than clip-path to “clip” elements in a responsive manner.
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.
Shaders and Gradients
The second issue of Offscreen Canvas is about learning shaders and explores why gradients are so important, and more.
Super Mario Scrollable Timeline
A fantastic horizontal scrolling timeline of Super Mario made by Adam Kuhn.
MonoLisa
A font family designed for software developers.
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.
Jigglypuff (づ｡◕‿‿◕｡)づ ♫ ♫ ♫
A super-cute demo by Nico Fonseca.
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.
In case you didn’t know about it: jless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data.
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.
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
Repetition Image Hover Effects
A simple and fun hover effect with repeated image layers that get scaled up and down.
The post Collective #700 appeared first on Codrops.