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

CSS,CSS デザイン

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

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

box-reflectの基本

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

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

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

反射の方向

above上に反射
below下に反射
left左に反射
right右に反射

グラデーションを指定していない場合は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));
}

CSS,CSS デザイン

Posted by Yousuke.U