mask-image: linear-gradient([グラデーションの方向], [開始色ストップ], [終了色ストップ]);
枠の下部がフェードアウトした表示の枠を作成するコードと実行結果を紹介します。
最近のWebブラウザでの対応を前提とする場合は、CSSのmask-image プロパティのlinear-gradientを利用します。
mask-image のlinear-gradient書式は次の通りです。
mask-image: linear-gradient([グラデーションの方向], [開始色ストップ], [終了色ストップ]);
グラデーションの方向は以下の値が設定できます。
| 値 | 意味 |
|---|---|
| to bottom | 垂直方向に上から下に向かうグラデーション |
| to top | 垂直方向に下から上に向かうグラデーション |
| to right | 水平方向に左から右に向かうグラデーション |
| to left | 水平方向に右から左に向かうグラデーション |
| to top left | 水平方向に右下から左上に向かうグラデーション |
| to top right | 水平方向に左下から右上に向かうグラデーション |
| to bottom left | 水平方向に右上から左下に向かうグラデーション |
| to bottom right | 水平方向に左上から右下に向かうグラデーション (デフォルト値) |
| [nn]deg | 時計回りでnn度の角度 |
開始色ストップ、終了色ストップは以下の書式です。
[色またはtransparent] [パーセンテージまたは長さ]
rgba指定も可能です。
rgba([valueR], [valueG], [valueB], [valueA]) [パーセンテージまたは長さ]
＃RRGGBBAA [パーセンテージまたは長さ]
以下のHTML,CSSを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="FrameFade.css" />
</head>
<body>
<h1>枠のフェードのデモ</h1>
<p>枠の外です。</p>
<div class="FrameFade">
<div>コンテンツです</div>
<img src="img/content.png" /><br />
<div>コンテンツの終わりです</div>
</div>
<p>枠の外です。</p>
</body>
</html>
.FrameFade {
width:320px;
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.FrameFade img {
width:100%;
}
以下のコードでフェード表現をしています。上から下へのグラデーションで、70%の位置までは黒としており、不透明となります。
100%の位置では透明になる指定のため、70%の位置から徐々にフェードアウトします。
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
上記のHTMLページを表示すると下図のページが表示されます。FrameFadeクラスのdiv枠は下がフェードアウトしており、
[コンテンツの終わりです]の文字列はほとんど見えない状態です。
枠の下側がフェードアウトする効果をCSSで表現できました。
