文字をぼかす方法 テキストシャドウやフィルター文字

質問

ど素人です。CSSをホームページビルダーを使って弄りながら微かに覚えていってます。

http://x69.jp/croix/17/　←こちらのトップのようなものを作りたいです。

<div align="">
<table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td align="center" valign="middle">
<a href="http://*****" onfocus="this.blur()" title=" dive into "><img src="img/index.gif" onmouseover="this.src='img/index2.gif'" onmouseout="this.src='img/index.gif'" border="0"></a>
<img src="img/index2.gif" height="0" width="0">

HTMLファイルはこんな感じでした。さっぱりわからないのですが、オンマススとあるので、マウスを上にのせた状態の時に文字が滲んだように見えているんだろうなと推測してます。
***わかる方は説明してくださると嬉しいです。

今の私には理解できないので、http://copicopi.com/filter.html　こちらのサイトを参考にしたいと考えています。
***ただコピーするだけのことなのですが、影をつけたまま文字を滲ませたりすることを一度に設定したいときはどうすればいいのでしょうか？

いくつかの設定をしたいときは、「;」で区切るような文章を見た気がします。
<span style="width:100%;font-size:20pt;filter:Alpha(opacity=10.)このあと→　;filter:Blur(add=0, direction=315,strength=4)">ここに文章を書いてください</span>
というように、続けていいのでしょうか。

チェックすればわかることなのですが、ビルダーの使い方も届いたばかりで把握してなくて、教えていただけると助かります。

文字をぼかすのはIEでは見れないと書いてあったようなのですが、CSS３でこういうことができるような記述も読みました。
でも私のPCでは見えています。
***フィルター文字は使用しないほうがいいのでしょうか。

あちらこちらの記事に惑わされています。わからないので、教えてください。
よろしくお願いします。

回答No.1

neko-ten · ベストアンサー

とりあえず、提示されてるサイトの内容はただの画像です。
ふつうの文字画像と、ぶれた文字画像二つがあり、JavaScriptのonMouseOverで切り替えているだけです。
onmouseoverのイベントハンドラで、画像をぶれているものに切り替え
onmouseoutで元の画像に切り替え
ってだけです。
これだけならCSSでも実装できますから、JavaScriptいらんですけども・・・。

CSSのfilterはIE独自ですからお勧め全くしません。
CSS3は、逆にIEがまともに対応していません。
どちらも知っておいた方がいいですが、使うかどうかはまた別。
CSS3が今後ディファクトスタンダードになっていくでしょうが、それといま使うかどうかも別ですな・・・。

とりあえず、ビルダー使うにしろ何にしろHTMLの基礎が全くなっていないとまともなサイトはできません。
（ビルダー自体が基本お勧めできないソフトウェアではあるのですが・・・）
きついことを言えば、提示されたサイト程度のタグがわからないとすれば、まずはHTML習熟を先にしないと先ですぐ詰まってきます。
きちんとしたリファレンス一冊買って、知らないタグ出たら聞く前に調べること。
タグを全部覚えなくてもいいですが、良く使うタグはあまり多くないです。

お礼

大変参考になりました。

そうですね。基本が大事だということはやっていてわかります。
色を変えたり、背景変えたり、出来上がっているテンプレ変えたりしてると、穴ぽこ状態で覚えてしまって、いざ白紙から作ろうとすると、宣言自体からわからなかったりします。

やはり、本を購入して基礎を勉強したほうがいいのですね。
CSSというのは変化していっているようなので、とりあえずHTMLからやってみます。

ありがとうございました。