docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: css-masking-with-gradients
|
||||
title: "CSS Masking with Gradients"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["gradient mask", "linear-gradient mask", "radial-gradient mask", "conic-gradient mask", "mask-image gradient"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "masking", "gradients", "mask-image"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css3_masking_gradients.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Masking with Gradients]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A CSS gradient can be used as a mask layer image, letting `mask-image` fade or shape an element using linear, radial, or conic gradients. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Gradient as mask** — `mask-image` can take a CSS gradient as its mask layer. [S1]
|
||||
- **Gradient types** — the page demonstrates linear, radial (circle and ellipse), and conic gradient masks. [S1]
|
||||
- **Black vs transparent** — in a gradient mask, the gradient's opaque (black) regions reveal the element and transparent regions hide it. [S1]
|
||||
- **`-webkit-` prefix** — examples pair `mask-image` with `-webkit-mask-image`. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Fade-out mask** — `linear-gradient(black, transparent)` fades an element from fully visible to hidden. [S1]
|
||||
- **Soft vignette / spotlight** — `radial-gradient(circle, black 50%, rgba(0,0,0,0.5) 50%)` reveals a central region fully and partially dims the rest. [S1]
|
||||
- **Rotational mask** — `conic-gradient(black 0deg, transparent 360deg)` sweeps visibility around a center. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Linear gradient mask layer** [S1]
|
||||
```css
|
||||
.mask1 {
|
||||
-webkit-mask-image: linear-gradient(black, transparent);
|
||||
mask-image: linear-gradient(black, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
A second linear-gradient example applies the mask over a background image. [S1]
|
||||
```css
|
||||
.mask1 {
|
||||
max-width: 600px;
|
||||
height: 400px;
|
||||
background: url(img_5terre.jpg) no-repeat;
|
||||
-webkit-mask-image: linear-gradient(black, transparent);
|
||||
mask-image: linear-gradient(black, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
**Radial gradient mask layer — circle** [S1]
|
||||
```css
|
||||
.mask2 {
|
||||
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
|
||||
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
|
||||
}
|
||||
```
|
||||
|
||||
**Radial gradient mask layer — ellipse** [S1]
|
||||
```css
|
||||
.mask3 {
|
||||
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
|
||||
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
|
||||
}
|
||||
```
|
||||
|
||||
**Conic gradient mask layer** [S1]
|
||||
```css
|
||||
.mask3 {
|
||||
-webkit-mask-image: conic-gradient(black 0deg, transparent 360deg);
|
||||
mask-image: conic-gradient(black 0deg, transparent 360deg);
|
||||
}
|
||||
```
|
||||
|
||||
**CSS masking properties reference** [S1]
|
||||
|
||||
| Property | Description |
|
||||
|---|---|
|
||||
| `mask-clip` | Specifies which area is affected by a mask image |
|
||||
| `mask-composite` | Specifies a compositing operation used on the current mask layer with the mask layers below it |
|
||||
| `mask-image` | Specifies an image to be used as a mask layer for an element |
|
||||
| `mask-mode` | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
|
||||
| `mask-origin` | Specifies the origin position of a mask layer image |
|
||||
| `mask-position` | Sets the starting position of a mask layer image |
|
||||
| `mask-repeat` | Specifies how the mask layer image is repeated |
|
||||
| `mask-size` | Specifies the size of a mask layer image |
|
||||
| `mask-type` | Specifies whether an SVG element is treated as a luminance mask or as an alpha mask |
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's own examples are the applied cases: linear, radial (circle/ellipse), and conic gradients applied as mask layers (including one over the `img_5terre.jpg` background). No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Fade an element out with a linear gradient mask (language: CSS):
|
||||
```css
|
||||
.mask1 {
|
||||
-webkit-mask-image: linear-gradient(black, transparent);
|
||||
mask-image: linear-gradient(black, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **Linear gradient** — for directional fades (top-to-bottom, left-to-right). [S1]
|
||||
- **Radial gradient (circle / ellipse)** — for a centered spotlight or vignette effect. [S1]
|
||||
- **Conic gradient** — for a rotational/angular reveal around a center point. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[CSS Tutorial]]
|
||||
- **관련 개념:** [[CSS Masking PNG]], [[CSS Masking SVG]], [[CSS Gradients]]
|
||||
- **참조 맥락:** Referenced when fading or shaping an element's visibility using a gradient-based mask layer.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Masking with Gradients — https://www.w3schools.com/css/css3_masking_gradients.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Masking with Gradients" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user