CSSの鏡面反射について

質問

スクリプトを使わず鏡面反射の効果が出来ないか色々探してhttp://designshack.net/articles/css/mastering-css-reflections-in-webkit/ここに辿りついたのですが、どうもこの通りに自分のCSSのコードに組み込んでも表示されません。
参考にしたサイトでは画像を使っているのですが、自分のはコンテンツの箱を作ってそれを鏡面反射させたいのです。
この効果は画像だけに適応されるのでしょうか？

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

一般ボックスでも可能です。
書き方が間違っているか、対応していないブラウザを使ってるだけではないでしょうか？

<div style="-webkit-box-reflect: below;">
あいうえお
</div>

お礼

CSSを勉強したばかりなので、勉強不足というところもあるかもしれません。
もう少し頑張ってみようと思います。
ブラウザはchromeを使用しているのでそこは問題ないです。

回答有難うございました。

回答No.3

tracer

スクリプトを使わずにCSSだけで出来てしまうには理由があります。
一言でいえば、CSSが進化したからです。
しかし、肝心のブラウザが進化していなければ、進化したCSSを使用(表示)することができません。
古いブラウザはもちろんですが、InternetExplorerに限っては最新の9でもCSSの進化についてこれていません。そして、残念ながら参考にされたサイトのソースはwebkit(safari/chrome)のみに向けられたテクニックです。つまり、そっくりそのまま使う場合、firefox、oprea、internetExplorerで鏡面反射は表示できません。

ご趣味でWEBサイトを作られているだけかもしれませんが、まともなWEBサイトを目指されるなら、InternetExplorerの表示ーはあまり当てにしないほうがいいですよ。もちろんユーザー毎の好き嫌いはあると思いますが、WEB制作的、あるいは機能的にはどのバージョンのIEも最悪最低と大評判です。

お礼

ブラウザはchromeを使っているので問題ないです。
もうすこし調べてみようと思います。

回答有難う御座いました。

回答No.1

noname#158634

＞この効果は画像だけに適応されるのでしょうか？
そうです。そのサイトにも「flip the image」って書いてますよ。
理由を一から説明することはできますが、長くなるし初心者には理解するのが大変なので省きます。
ものすごく簡単な部分だけ言うと、「コンテンツの箱」とやらは「画像ではない」からです。

お礼

CSSを勉強し始めの頃、テンプレートで鏡面反射をしているサイトを見たのでこれで出来るのではと思ったのですが残念です。
スクリプトで頑張ってみようと思います。

回答有難うございました。