ピンデザイナーのWebサイト構築技法

現役のピンWebデザイナー？が「売れる」Webサイトの構築技法やWebクリエイター能力試験の虎の巻を公開します。

ピンデザイナーより

CSSでテキストを装飾(4)

画像を使わないドロップシャドウの表現

この表現方法は、ブラウザ特有の表現です。 MacのsafariとWindowsIE5.0以降のブラウザのみです。また両ブラウザの互換性もないので、注意が必要ですが。。。。

ドロップシャドウ

<p style="color:#FF0000;
text-shadow:#999999 5px 5px 10px;
font-size:18px;">ドロップシャドウ</p>

text-shadowプロパティーを指定することでドロップシャドウの効果をあたっることが出来ます。例題では、「ドロップシャドウ」という文字列の段落を作り、その段落に対して、フォントの色#ff0000、シャドウの色#999999、その後ろの３数字はそれぞれ、水平方向の距離、垂直方向の距離、ぼかしの距離を入力しています。WinIEではそのように確認できませんよね！Mac Safariで見てください。

ドロップシャドウ

<p style="color:#ff0000;
filter:DropShadow(Color=#999999,OffX=2,OffY=2,Positive=1);
width:180px;
height:20px;
font-size:18px;
font-weight:bold;">ドロップシャドウ</P>

これはほとんどの方、シャドウ付きで閲覧できるはずです！filterプロパティーは「ビジュアルフィルタ」と呼ばれWindowsIEの拡張機能として用意されたものです。したがってWindows　IE　5.0以降でないと表示することができません。 ここで、width(幅)を指定していますが例題だと18(px)X8（文字）。なので単純計算して18X10=180とし、height(高さ)は単純に文字サイズと同じ18pxとしてみました。

このエフェクトは幅もしくは高さを記述しないと効果が現れないので注意です。

ご覧になったらブログランキングに投票お願いします。⇒こちらです。
おかげ様で2位なんですが…どうしても1位になりたいです。
応援よろしくお願いしますm(__)m

【PR】Ｗｅｂエンジニアの転職なら　【ウェブキャリア】

テーマ:ＨＰ作成 - ジャンル:コンピュータ

2006/02/15(水) 15:44:21| HTMLとＣＳＳのダイジェスト解説| トラックバック：0 コメント：3
| ホーム |
copyright © 2005 ピンデザイナーのWebサイト構築技法 all rights reserved.
Powered by FC2ブログ.
無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 一戸建て