CSSだけで文字や画像を反転させる

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

オリジナル画像と鏡像の間隔を指定する

　-webkit-box-reflectプロパティではオリジナル画像と鏡像の間隔を指定することもできる。間隔の指定は、方向の指定に続けて半角スペースで区切って次のように記述する。ここでは20ピクセルの間隔を取るように指定した。

20ピクセルの間隔を取ったもの（画像をクリックすると拡大します）

img {
-webkit-box-reflect: right 20px;
}

※ブラウザで表示を確認する

鏡像にマスクをかける

　-webkit-box-reflectプロパティでは鏡像に対してマスクをかけることができる。マスクには-webkit-gradient()で作成するグラデーションか、透過した24bitのPNG画像を利用することが可能だ。

　マスクの指定は、間隔の指定に続けて半角スペースで区切って記述する。たとえば、次のサンプルでは画像の下に鏡像を表示して、鏡像が上から下にかけて透明になるように-webkit-gradient()でグラデーションマスクをかけている。

　なお、-webkit-gradient()について詳しくは「CSSでグラデーションを表現する」を参照してほしい。

グラデーションでマスクをかけたもの

img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.3, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}

※ブラウザで表示を確認する

　PNG画像でマスクをかける場合、-webkit-gradient()の代わりにurl()で画像のURLを指定する。

PNG画像で鏡像にマスクをかけたもの

img {
-webkit-box-reflect: below 0px url(mask.png);
}

※ブラウザで表示を確認する

　ここでは次のようにグラデーションに斜線を入れたPNG画像を利用した。白色の部分は透過して24bit PNGとして保存してある。なお、鏡像にマスクをかけた場合、マスク画像も同じ方向に反転して利用されるので注意したい。

マスク用に用意したPNG画像

※ブラウザで表示を確認する

　次回は、マスクの機能について詳しく紹介する。