Safari 4が対応したCSSの新機能:グラディエント、反転、マスク

エ・ビスコム・テック・ラボ
2009-03-02 19:19:02
  • このエントリーをはてなブックマークに追加

テキストや画像を反転する

 反転(Reflect)の機能を利用すると、テキストや画像を反転させ、鏡像を作成することができる。たとえば、次のように

の中にテキストと画像を表示したものを用意する。

テキストと画像を表示したもの(画像をクリックすると拡大します) テキストと画像を表示したもの(画像をクリックすると拡大します)
REFLECT
*
ブラウザで表示を確認する

 このテキストと画像を反転して表示するには、

に対して-webkit-reflectプロパティを指定する。次のように「below」と指定すると、オリジナルの下に反転したテキストと画像を表示することができる。

テキストと画像を反転したもの(画像をクリックすると拡大します) テキストと画像を反転したもの(画像をクリックすると拡大します)
div {
-webkit-box-reflect: below;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]