• ベストアンサー

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>

質問者が選んだベストアンサー

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.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>

参考URL:
http://www.tohoho-web.com/css/reference.htm#FilterAlpha
noname#57880
質問者

お礼

お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。

noname#57880
質問者

補足

まさに!これです。 ソースありがおとうございまうす

その他の回答 (3)

  • Seravy
  • ベストアンサー率47% (118/249)
回答No.3

HTMLタグでですか? あ、ちなみに、影というより、「鏡面反射」の方が近いですね。単純に「反射」の方が近いです。 IEで使えないと言っておきながら、styleでfilter属性を利用するのは、IE以外をすべて除外する事になるのでお勧めできません。 現在のシェアから言って、5人に1人はIE以外のブラウザーを使っている事になるので、あなたが望んでいるユーザー体験をさせるには、もっと気の利いたことでやった方が良いと思います。 で、方法は2つ。 1つめは、OKWAVEがしているように、最初っから画像で作ってしまう方法。 勘違いされておられるかもしれませんが、OK WAVEのロゴは画像です。タグ(CSS)で作られた物ではありません。 やり方はNo.1さん参照で。 2つめは、JavaScriptライブラリーを使う事です。 Reflex.jsだと画像を鏡面表示できます。 文字までは調べきれませんでしたが、多分あると思います。ライブラリーを探してみてください。

noname#57880
質問者

お礼

お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。

noname#57880
質問者

補足

試しにNO1さんを作っていましたが、なかなかよく出来ていたので、そっちの案で作ろうと思いますが、Reflex.jsもよさそうなので こっちも、覚えたいと思います。 NO1.2.3さんアドバイスありがとございました

回答No.2

前の質問(この質問と全く同じ内容)に返事をすることが先では?

noname#57880
質問者

お礼

お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。

noname#57880
質問者

補足

そうでしたね。返事終わりました!!

  • asuncion
  • ベストアンサー率33% (2127/6289)
回答No.1

Photoshopあたりのグラフィックソフトを使って、下記の手順を踏む必要があるのではないでしょうか。   ・元になる画像を作る   ・基準線に沿って、180度反転コピーする   ・反転コピーした画像に、「基準線に近いほど透過度を下げる」という加工を施す

noname#57880
質問者

お礼

お礼を付けるの忘れてました。遅くなってすいません。 回答ありがとうございました。

noname#57880
質問者

補足

試しにジェイトリムで作成していますが 納得の行きそうなものが出来そうです。

関連するQ&A

専門家に質問してみよう