C

css-alpha-masking

css-alpha-masking

github.com/mengto设计与 UI7.1k1.5k 次安装3 天前更新

关于 css-alpha-masking

用于为 CSS 元素添加定向透明度渐隐效果的设计技能，涵盖遮罩设置、Safari 回退写法及渐隐方向和强度调整。

主要功能

01水平和垂直透明度渐隐
02Safari 的遮罩回退写法
03可调整渐隐方向和停止点
04关于可见内容与遮罩的说明

适用场景

01淡化图像或文字边缘
02为容器添加由上至下的渐隐
03调整渐隐宽度和柔和度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mengto/skills --skill css-alpha-masking

安装后在 Claude Code 中输入/css-alpha-masking确认已加载。

附带文件demo/index.htmldemo/PROMPT.md

详细介绍

CSS Alpha Masking 技能

工作流

确认方向（水平方向或垂直方向）和渐隐停止点的百分比。
提供内联 CSS 代码片段，以及所需的类用法。
仅提供小幅调整选项（方向、停止点位置、颜色）。

使用检查清单

直接在元素上应用遮罩样式，或将其写入 CSS 类。
始终同时包含 mask-image 和 -webkit-mask-image，以兼容 Safari。
确保元素包含可见内容；遮罩仅显示或隐藏 Alpha 通道。

水平（左/右）渐隐

/* Add this inline CSS to any element */
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

垂直（上/下）渐隐

/* Add this inline CSS to any element */
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);

自定义选项

方向：to right、to left、to bottom、to top。
渐隐深度：调整 15% 和 85% 停止点。
强度：将 transparent 改为 rgba(0,0,0,0.2)，以获得更柔和的渐隐效果。

常见问题

忘记为 Safari 添加 -webkit-mask-image 回退属性。
以为遮罩能在 overflow: hidden 且后方没有可见内容的元素上生效。

规格缺失时要询问的问题

渐隐方向是什么？
渐隐边缘应有多宽？
这是用于图像、文本，还是容器背景？

评论

支持 Markdown

登录后评论