---
type: bookmarks
tags: ['css', 'clip-path', 'mask', 'svg']
status: release
ctime: 2022-04-09
mtime: 2026-10-06
---

import QuoteLink from '@components/QuoteLink.astro'

<QuoteLink url="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_masking">
  CSS masking
</QuoteLink>

---

- [Animating with Clip-Path | CSS-Tricks](https://css-tricks.com/animating-with-clip-path/)
- [Ghost Buttons with Directional Awareness in CSS | CSS-Tricks](https://css-tricks.com/ghost-buttons-with-directional-awareness-in-css/)[^116-1]
- [Chameleonic Header | CodyHouse](https://codyhouse.co/demo-tutorials/chameleonic-header/index.html)
- [Using "box shadows" and clip-path together | CSS-Tricks](https://css-tricks.com/using-box-shadows-and-clip-path-together/)[^116-2]

`mask` — 현재 개체를 배경으로 합성하기 위한 알파 마스크를 정의

- [Masking GIFs with other GIFs | CSS-Tricks](https://css-tricks.com/masking-gifs-with-other-gifs/)
- [Going From Solid to Knockout Text on Scroll | CSS-Tricks](https://css-tricks.com/going-from-solid-to-knockout-text-on-scroll/)
- [How to Create an Animated Chart of Nested Squares Using Masks | CSS-Tricks](https://css-tricks.com/how-to-create-an-animated-chart-of-nested-squares-using-masks/)

---

[^116-1]: `clip-path: inset(0 0 0 0);` 방향에 따라서 버튼 배경색이 확장되는 모션. 방향은 삼각형(`polygon()`) 4개를 각 방향에 맞춰 위치시키면 된다.
[^116-2]: 화살표 모양 그리기와 `filter: drop-shadow`로 그림자 효과 생성하기