CSS | box-reflectでテキストや画像などを反射表示させる方法

2020-06-27CSS デザイン,CSS

CSSのFilterにあるbox-reflectを使って、テキストや画像などを反射表示させる方法の紹介です。

box-reflectの基本

box-reflectはCSSベンダープレフィックスで機能するCSSのひとつです。
2020年6月現在は「-webkit-box-reflect:」と記述することで機能します。

box-reflectで最低限必要な指定は以下になります。

-webkit-box-reflect: 反射の方向 余白;

反射の方向

グラデーションを指定していない場合は100％反射となるので、各サンプルでは反射に対してグラデーションを指定しています。

また、box-reflectで生成する反射は、反射元となる素材がある要素のサイズに関係なく表示されますので、以降に続くコンテンツに対して反射分の余白を必要とします。

box-reflectでテキストを反射させる

box-reflectでテキストを反射させる実装サンプルとサンプルコードです。

See the Pen CSS Text reflect by yochans (@yochans) on CodePen.

<div class="reflect">ONE NOTES</div>

.reflect {
	font-size: 50px;
	-webkit-box-reflect: below -40px -webkit-gradient(linear, left bottom, left top, from(#FFF), to(transparent));
}

テキストの場合、余白調整を大きめにマイナス値を指定して反射元に近づける事が可能です。

box-reflectで要素を反射させる

box-reflectで要素を反射させる実装サンプルとサンプルコードです。

See the Pen CSS box reflect by yochans (@yochans) on CodePen.

<div class="reflect"></div>

.reflect {
	width: 200px;
	height: 100px;
	background: #0091EA;
	-webkit-box-reflect: below 3px -webkit-gradient(linear, left bottom, left top, from(#FFF), to(transparent));
}

box-reflectで画像を反射させる

box-reflectで画像を反射させる実装サンプルとサンプルコードです。

See the Pen CSS image reflect by yochans (@yochans) on CodePen.

<div class="reflect"><img src="" /></div>

.reflect {
	-webkit-box-reflect: below -8px -webkit-gradient(linear, left bottom, left top, from(#FFF), to(transparent));
}