UI Dev Newsletter Issue #95
In this issue: CSS masking, sticky page header shadow, Non-Text Contrast tests, and more.
CSS Masking
Ahmad Shadeed explains everything you need to know about masking in CSS with some compelling examples.
Fancy reveal animations with CSS masks and @property
Artur Bień demonstrates how CSS masks and custom properties can be combined to create impressive reveal effects.
A CSS selector to highlight clickable elements
Sebastian De Deyne shows how to use :has and :is selectors to add an outline to clickable elements when clicking on non-interactive elements.
Sticky Page Header Shadow on Scroll
Ryan Mulligan is sharing one solution that adds a box-shadow to the sticky header as soon as the page is scrolled.
A small JavaScript pattern I enjoy using
Kilian Valkhof shares a couple of JavaScript patterns for checking more than one value of the same variable.
The WebAIM Million
WebAIM shares an overview of and insight into the current state of web accessibility for individuals with disabilities and trends over time.
When I Get That Low Contrast Feeling, I Need Non-Textual Healing
Ian Lloyd shares a quiz that tests your Non-Text Contrast knowledge.
OpenCommit: GPT generates impressive commits in 1 second
Dima Sukharev announces his open-source project auto-generates impressive commits in 1 second.