clipPath vs. mask

These things are so similar, I find it hard to keep them straight. This is a nice little explanation from viewBox (what a cool name and URL, I hope they keep it up). The big thing is that clipPath (the element in SVG, as well as clip-path in CSS) is vector and when it is applied, whatever you are clipping is either in or out. With a mask, you can also do partial transparency, meaning you can use … Read article “clipPath vs. mask”

The post clipPath vs. mask appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

https://viewbox.club/tips/06.SVG_ClipPath_vs_Mask.html

Erstellt 5y | 27.12.2020, 15:20:38


Melden Sie sich an, um einen Kommentar hinzuzufügen

Andere Beiträge in dieser Gruppe

A Better API for the Resize Observer

ResizeObserver, MutationObserver, and IntersectionObserver enhance performance over their predecessors. Zell discusses their API similarities, usage steps, refactoring strategies, and advantages wi

16.06.2025, 13:50:11 | CSS tricks
Breaking Boundaries: Building a Tangram Puzzle With (S)CSS

We put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math,

12.06.2025, 14:50:07 | CSS tricks
Creating an Auto-Closing Notification With an HTML Popover

The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Popovers can be dismissed a number of ways, but there

09.06.2025, 14:50:20 | CSS tricks
Better CSS Shapes Using shape() — Part 3: Curves

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve

06.06.2025, 15:10:24 | CSS tricks
The State of CSS 2025 Survey is out!

The State of CSS 2025 Survey dropped a few days ago, and besides anticipating the results, it's exciting to see a lot of the new things shipped to CSS reflected in the questions.

<hr /

05.06.2025, 18:20:09 | CSS tricks
Exploring the CSS contrast-color() Function… a Second Time

The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari T

05.06.2025, 16:10:06 | CSS tricks
Getting Creative With HTML Dialog

So, how can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I

03.06.2025, 15:20:18 | CSS tricks