鏡面反射（ミラーリフレクション）のCSSジェネレーター
画像やテキストに対して鏡面反射（リフレクション）エフェクトを適用するCSSを生成します。方向、距離、不透明度を調整可能です。
プレビュー
{{preview_html}}.mirror-reflect {
-webkit-box-reflect: {{reflect_value}};
}
/* 画像の場合 */
.mirror-reflect img {
width: 150px;
height: 150px;
max-width: 100%;
vertical-align: bottom;
}
/* テキストの場合 */
.mirror-reflect span {
font-size: 48px;
font-weight: bold;
color: #1e90ff;
display: inline-block;
}機能、使い方
- 指定した要素の下や横に、鏡面に置いたような反射（リフレクション）効果を付与します。
- 透明度のグラデーションとサイズを調整し、自然な減衰を表現可能です。
- 画像要素だけでなく、見出しなどのテキスト要素に対しても適用できます。
CSSプロパティの説明
-webkit-box-reflectプロパティを使用して鏡面反射を実現しています。
第1引数のbelowやrightで反射方向を指定し、第2引数の0pxなどで要素との距離を指定しています。
第3引数にlinear-gradientを指定することで、反射が遠ざかるにつれて透明になるマスク効果を与えています。
