- ベストアンサー
HTMLで文字の影
HTMLで、影文字を作りましたが、オケーウェブ(今見てる画面)の一番左上にある画像のように 、鏡のように、影を反転させようと思いますが、色々試行錯誤しましたが、上手くいきませんが、 何かアイデアはありませんか? text-shadowは、IEで使えないので、HTMLタグでお願いします。 ちなみに私のHTMLのソースです。 <html><head></head> <title>CSSを作るぞ</title> <body> <span style="width:60%;filter: (color=#E3E3E3,offx=3,offy=3,positive=-1)dropshadow (color=#E3E3E3,offx=10,offy=10,positive=-1);"><font size=7>影がついたかな?</font></span> </body></html>
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
こういうことですか↓ <html> <head> </head> <body> <DIV><IMG src="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif"></DIV> <DIV><IMG src="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif" style="filter:flipV() alpha( style=1, opacity=60, finishopacity=0, startx=85, starty=0, finishx=85, finishy=100);"> </DIV> <h1> <div style="width:100%; ">test</div> <div style="width:100%; filter:FlipV() alpha( style=1, opacity=60, finishopacity=0, startx=85, starty=0, finishx=85, finishy=100);">test</div> </h1> </body> </html>
その他の回答 (3)
- Seravy
- ベストアンサー率47% (118/249)
HTMLタグでですか? あ、ちなみに、影というより、「鏡面反射」の方が近いですね。単純に「反射」の方が近いです。 IEで使えないと言っておきながら、styleでfilter属性を利用するのは、IE以外をすべて除外する事になるのでお勧めできません。 現在のシェアから言って、5人に1人はIE以外のブラウザーを使っている事になるので、あなたが望んでいるユーザー体験をさせるには、もっと気の利いたことでやった方が良いと思います。 で、方法は2つ。 1つめは、OKWAVEがしているように、最初っから画像で作ってしまう方法。 勘違いされておられるかもしれませんが、OK WAVEのロゴは画像です。タグ(CSS)で作られた物ではありません。 やり方はNo.1さん参照で。 2つめは、JavaScriptライブラリーを使う事です。 Reflex.jsだと画像を鏡面表示できます。 文字までは調べきれませんでしたが、多分あると思います。ライブラリーを探してみてください。
お礼
お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。
補足
試しにNO1さんを作っていましたが、なかなかよく出来ていたので、そっちの案で作ろうと思いますが、Reflex.jsもよさそうなので こっちも、覚えたいと思います。 NO1.2.3さんアドバイスありがとございました
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2280)
前の質問(この質問と全く同じ内容)に返事をすることが先では?
お礼
お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。
補足
そうでしたね。返事終わりました!!
- asuncion
- ベストアンサー率33% (2127/6289)
Photoshopあたりのグラフィックソフトを使って、下記の手順を踏む必要があるのではないでしょうか。 ・元になる画像を作る ・基準線に沿って、180度反転コピーする ・反転コピーした画像に、「基準線に近いほど透過度を下げる」という加工を施す
お礼
お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。
補足
試しにジェイトリムで作成していますが 納得の行きそうなものが出来そうです。
お礼
お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。
補足
まさに!これです。 ソースありがおとうございまうす