
Issue #362
Learn how Shadow DOM works, how to create triangular breadcrumb ribbons, how to create a pure CSS animated SVG spinner, and more.


Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!
Silvestar Bistrović shows a variety of different ways to create triangular breadcrumb ribbons.
From Our Sponsor

Create Stunning Websites Even When You Have Limited Resources
Be Theme offers you 430+ pre-built websites that you can customize in a matter of hours, so you can build an intuitive, responsive, and beautiful website without overworking yourself.
Articles & Tutorials
Building a Pure CSS Animated SVG Spinner
Glenn McComb shows how to level up your loading indicators with a pure-CSS animated SVG loader.
Revisiting prefers-reduced-motion, the Reduced Motion Media Query
Eric Bailey provides some background about the reduced motion media query, and explains why we need it.
Digging Into The Display Property: Box Generation
Rachel Andrew takes a look at the display values which control box generation.
Breaking to a New Row With Flexbox
Tobias Bjerrome Ahlin shows how you can break to a new flexbox row or column without setting the size of an item, by adding a collapsed element between two flex items.
What Does Dark Mode’s “supported-color-schemes” Actually Do?
Thomas Steiner gives a quick intro to color-scheme meta tag.
Promoted Link (via ThoughtLeaders)

Get Your Free .design Domain Name!
Thinking of building your portfolio? A .design domain name is like .com and .net, but it’s more relevant to what you do as a designer.
Tools
Computed Variables
Computed Variables is a JavaScript plugin that allows CSS variables to subscribe to events happening in the browser, and have their values updated by simple JavaScript functions on an as-needed basis.
Stylelint A11y
A plugin for stylelint that automatically checks your CSS for accessibility.
Inspiration
Until Next Week
Thanks for reading! If you find the content valuable, please consider supporting the newsletter on Patreon.
Happy coding,
Zoran Jambor

Baseline Status for Video
A handy online tool that will let you easily show Baseline Status in your videos.



