画像を円、スクイクル、ハート、六角形などの形状にクリッピングするための CSS のみの Tailwind CSS マスク。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
マスク コンポーネントは、画像や要素に幾何学的形状またはカスタム形状を適用し、視覚的な魅力とユニークなデザインを作成します。 CSS マスク プロパティを使用して構築されたマスクにより、創造的な画像のフレーミングと装飾的なスタイルが可能になります。 Frutjam マスク システムは複数の形状をサポートしており、アバター フレーム、ギャラリー プレゼンテーション、芸術的なレイアウトに最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| mask | ベース | 要素を CSS マスク形状にクリップします |
| mask-circle | スタイル | 円形マスク |
| mask-squircle | スタイル | スクアククル（角丸四角）マスク |
| mask-heart | スタイル | ハート型マスク |
| mask-hexagon | スタイル | 六角形のマスク |
| mask-pentagon | スタイル | 五角形マスク |
| mask-diamond | スタイル | ダイヤモンド型マスク |
| mask-star | スタイル | 五芒星のマスク |
| mask-star-2 | スタイル | 六芒星のマスク |
| mask-triangle | スタイル | 三角形のマスク |
| mask-half-1 | 修飾子 | シェイプの左半分 (分割マスクの場合) |
| mask-half-2 | 修飾子 | シェイプの右半分 (分割マスクの場合) |
基本的な使い方
グラデーションの背景を持つシンプルな円形マスクを作成します。
1 2 3 | <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
1 2 3 | <div className="mask mask-circle h-24 w-24"> <div className="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
マスクの形状
マスク要素にさまざまな幾何学的形状を適用します。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-squircle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-hexagon h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-squircle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
マスクのサイズ
柔軟なレイアウト オプションを使用するには、さまざまなサイズのマスクを適用します。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-16 w-16"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-48 w-48"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
異なるグラデーションのマスク
さまざまなグラデーションの方向と色のマスクを組み合わせます。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-b from-primary to-accent"></div> </div> <div class="mask mask-hexagon h-32 w-32"> <div class="w-full h-full bg-linear-to-r from-secondary to-primary"></div> </div> <div class="mask mask-squircle h-32 w-32"> <div class="w-full h-full bg-linear-to-t from-error to-warning"></div> </div> <div class="mask mask-squircle h-32 w-32"> <div class="w-full h-full bg-linear-to-l from-success to-info"></div> </div> |
単色のマスク
シンプルなデザインの場合は、単色の背景色のマスクを適用します。
html
1 2 3 4 | <div class="mask mask-circle h-24 w-24 bg-primary"></div> <div class="mask mask-squircle h-24 w-24 bg-secondary"></div> <div class="mask mask-hexagon h-24 w-24 bg-accent"></div> <div class="mask mask-squircle h-24 w-24 bg-info"></div> |
組み合わせたバリアント
マスク レイアウトにさまざまな形、サイズ、色を組み合わせます。
html
1 2 3 4 5 6 7 | <div class="mask mask-hexagon h-48 w-48 bg-linear-to-r from-primary to-secondary"></div> <div class="mask mask-squircle h-40 w-40 bg-linear-to-br from-accent to-info"></div> <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-t from-success to-warning"></div> </div> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な マスク クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。