文字・画像を反転させる
現在はGoogle Chrome、Safariでしか対応していませんが、
box-reflectプロパティで文字・画像に反転の効果を付けることができます。
.reflect1 {
-webkit-box-reflect:right 10px;
}
.reflect2 {
-webkit-box-reflect:below 5px;
}
.reflect3 {
-webkit-box-reflect:below 5px;
}
反転します。反転します。
above(上)、below(下)、left、rightで反転する方向、
半角スペースを空けて値を指定すると間隔を指定できます。
また、反転した画像にマスクをかけて鏡に写りこんだような表現もできます。
.reflect4 {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.4, rgba(0,0,0,0)), to(rgba(0,0,0,7)));
}
webkit-gradientを組み合わせることで、上記のような表現ができます。
グラデーションに関しては、グラデーションを表現する(2)
をご参考いただけたらと思います。
