mcpField
C
css-alpha-masking

css-alpha-masking

github.com/mengtoデザイン・UI7.1k1.5k 回インストール3 日前に更新
リポジトリ

css-alpha-masking について

CSS 要素に方向性のあるアルファフェードを加えるデザインスキルです。マスク設定や Safari 向けの代替指定、方向と強さの調整を案内します。

主な機能

  1. 01横方向と縦方向のアルファフェード
  2. 02Safari 向け mask-image の代替指定
  3. 03フェード方向と停止位置の調整
  4. 04表示内容とマスクに関する注意点

活用シーン

  1. 01画像やテキストの端をフェード
  2. 02コンテナに上から下へのフェードを適用
  3. 03フェード幅と柔らかさを調整

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/css-alpha-maskingを入力して読み込まれたか確認します。

同梱ファイルdemo/index.htmldemo/PROMPT.md

詳細

CSS アルファマスキングスキル

ワークフロー

  1. 方向（水平または垂直）とフェードの停止位置の割合を確認します。
  2. インライン CSS スニペットと、必要なクラスの使い方を提示します。
  3. 小さな調整のみを提案します（方向、停止位置、色）。

使用チェックリスト

  • マスクのスタイルは、要素に直接適用するか、CSS クラスに記述します。
  • Safari 向けに、mask-image と -webkit-mask-image の両方を必ず含めます。
  • 要素に表示するコンテンツがあることを確認します。マスクで表示・非表示が切り替わるのはアルファ値のみです。

水平方向（左／右）のフェード

/* 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 対応