원클릭으로 Manus에서 모든 스킬 실행

시작하기

glassmorphism

스타14

포크1

업데이트2026년 5월 3일 17:08

Glassmorphism 玻璃态设计（毛玻璃、透明度、模糊、分层深度）。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

wzyxdwll

wzyxdwll/ccgx-workflow

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Glassmorphism Design Spec

4 Core Elements

Transparency — Semi-transparent backgrounds using rgba() or hsla() with alpha 0.05–0.4
Blur — backdrop-filter: blur() ranging 8–40px for frosted-glass effect
Border — Subtle semi-transparent borders (1px solid rgba(255,255,255,0.18)) to define edges
Shadow — Soft layered box-shadow for depth separation from background

CSS Tokens

Reference: references/tokens.css

Use CSS custom properties from tokens.css for consistent theming:

@import 'references/tokens.css';

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

Component Examples

Card

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem;
}

Navbar

.glass-nav {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-bottom: var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

Modal Overlay

.glass-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}
.glass-modal {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border);
  border-radius: var(--glass-radius-lg);
  box-shadow: var(--glass-shadow-elevated);
}

Button

.glass-btn {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  transition: background 0.2s;
}
.glass-btn:hover {
  background: var(--glass-bg);
}

Browser Compatibility

Feature	Chrome	Firefox	Safari	Edge
`backdrop-filter`	76+	103+	9+ (`-webkit-`)	79+
`rgba()` backgrounds	All	All	All	All

Always include -webkit-backdrop-filter for Safari support
Firefox <103: use @supports fallback with solid semi-transparent bg
Fallback pattern:

.glass-card {
  background: rgba(255, 255, 255, 0.85); /* fallback */
}
@supports (backdrop-filter: blur(1px)) {
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
  }
}

Accessibility Notes

Ensure contrast ratio ≥ 4.5:1 for text over glass surfaces — test against all possible backgrounds
Provide prefers-reduced-transparency media query to disable blur/transparency for users who need it
Avoid placing critical text on highly transparent surfaces without a fallback
Use prefers-contrast: more to increase border opacity and reduce transparency

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
}

이 저장소의 다른 Skills

같은 저장소

ccg-skills

wzyxdwll/ccgx-workflow

CCG Skills - Quality gates, documentation generator, and multi-agent orchestration. Auto-installed by CCG workflow system.

2026-06-1214

verify-change

wzyxdwll/ccgx-workflow

变更校验关卡。分析代码变更，检测文档同步状态，评估变更影响范围。当用户提到变更检查、文档同步、代码审查、提交前检查、diff分析时使用。在设计级变更、重构完成时自动触发。

2026-06-1214

verify-module

wzyxdwll/ccgx-workflow

模块完整性校验关卡。扫描目录结构、检测缺失文档、验证代码与文档同步。当用户提到模块校验、文档检查、结构完整性、README检查、DESIGN检查时使用。在新建模块完成时自动触发。

2026-06-1214

verify-quality

wzyxdwll/ccgx-workflow

代码质量校验关卡。检测复杂度、重复代码、命名规范、函数长度等质量指标。当用户提到代码质量、复杂度检查、代码异味、重构建议、lint检查、代码规范时使用。在复杂模块、重构完成时自动触发。

2026-06-1214

verify-security

wzyxdwll/ccgx-workflow

安全校验关卡。自动扫描代码安全漏洞，检测危险模式，确保安全决策有文档记录。当用户提到安全扫描、漏洞检测、安全审计、代码安全、OWASP、注入检测、敏感信息泄露时使用。在新建模块、安全相关变更、攻防任务、重构完成时自动触发。

2026-06-1214

extract-learnings

wzyxdwll/ccgx-workflow

从近期开发会话中萃取可复用的模式 / 决策 / 教训。当用户提到提取教训 / 复盘 / lessons learned / 知识沉淀 / 经验萃取 / 提炼模式时使用。会扫 .context/ 决策日志 + git log 提交语义。

2026-05-1014

name	glassmorphism
description	Glassmorphism 玻璃态设计（毛玻璃、透明度、模糊、分层深度）。
license	MIT
user-invocable	false
disable-model-invocation	false
context	fork
paths	.tsx,.jsx,.vue,.svelte,.css,.scss

Glassmorphism Design Spec

4 Core Elements

Transparency — Semi-transparent backgrounds using rgba() or hsla() with alpha 0.05–0.4
Blur — backdrop-filter: blur() ranging 8–40px for frosted-glass effect
Border — Subtle semi-transparent borders (1px solid rgba(255,255,255,0.18)) to define edges
Shadow — Soft layered box-shadow for depth separation from background

CSS Tokens

Reference: references/tokens.css

Use CSS custom properties from tokens.css for consistent theming:

@import 'references/tokens.css';

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

Component Examples

Card

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem;
}

Navbar

.glass-nav {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-bottom: var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

Modal Overlay

.glass-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}
.glass-modal {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border);
  border-radius: var(--glass-radius-lg);
  box-shadow: var(--glass-shadow-elevated);
}

Button

.glass-btn {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  transition: background 0.2s;
}
.glass-btn:hover {
  background: var(--glass-bg);
}

Browser Compatibility

Feature	Chrome	Firefox	Safari	Edge
`backdrop-filter`	76+	103+	9+ (`-webkit-`)	79+
`rgba()` backgrounds	All	All	All	All

Always include -webkit-backdrop-filter for Safari support
Firefox <103: use @supports fallback with solid semi-transparent bg
Fallback pattern:

.glass-card {
  background: rgba(255, 255, 255, 0.85); /* fallback */
}
@supports (backdrop-filter: blur(1px)) {
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
  }
}

Accessibility Notes

Ensure contrast ratio ≥ 4.5:1 for text over glass surfaces — test against all possible backgrounds
Provide prefers-reduced-transparency media query to disable blur/transparency for users who need it
Avoid placing critical text on highly transparent surfaces without a fallback
Use prefers-contrast: more to increase border opacity and reduce transparency

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
}