超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Mozilla Color AccessUp Links SiteMap
ページ
テキスト
スクロール
ライン
イメージ
リンク
リスト
テーブル
フレーム
ボックス
フィルタ
a〜h
i〜z

 文字列に影をつける [スタイルシート]
colorで影の色、directionで影をつける方向(角度)を指定します。
width属性も必須です。

<h2 style="filter:shadow(color=#bbbbbb,direction=135);width:100%;color:purple;
font-family:'Times New Roman';">Patience is a virtue.</h2>

Patience is a virtue.

<div style="filter:shadow(color=pink,direction=180);width:100%;color:red;font-size:110%;
font-weight:bold;">超初心者のためのホームページ作成講座</div>

超初心者のためのホームページ作成講座

 文字列を二重にする [スタイルシート]
colorで影の色、offxで右方向への距離、offyで下方向への距離を指定します。
width属性も必須です。
例では、line-height属性で行間を広げ、影が切れずに表示されるようにしています。

<h2 style="filter:dropshadow(color=#bbbbbb);width:100%;color:#00f;font-family:'Times New Roman';line-height:110%;">BOYS, BE AMBITIOUS!</h2>

BOYS, BE AMBITIOUS!

<h2 style="filter:dropshadow(color=lightgreen,offx=10,offy=12);width:100%;color:green;
font-family:'Times New Roman';line-height:190%;">KNOWLEDGE IS POWER!</h2>

KNOWLEDGE IS POWER!

 文字列を発光させる [スタイルシート]
colorで光の色、strengthで光の長さを指定します。
width属性も必須です。
例では、line-height属性で行間を広げ、光が切れずに表示されるようにしています。

<div style="background-color:black;"><span style="filter:glow(color=orange);width:100%;color:white;font-size:1.5em;font-weight:bold;
font-family:'Times New Roman';text-align:center;line-height:160%;">MAKE HASTE SLOWLY.</span></div>

MAKE HASTE SLOWLY.

 画像をモノクロにする [スタイルシート]
<img src="sample/filter_image1.jpg" alt="コーヒーを飲む女の子">

コーヒーを飲む女の子

<img src="sample/filter_image1.jpg" style="filter:gray();" alt="コーヒーを飲む女の子">

コーヒーを飲む女の子
 画像にX線効果 [スタイルシート]
<img src="sample/filter_image2.jpg" alt="ハリストス正教会">

ハリストス正教会

<img src="sample/filter_image2.jpg" style="filter:xray();" alt="ハリストス正教会">

ハリストス正教会
 画像を透過させる [スタイルシート]
<img src="sample/filter_image3.jpg" style="filter:alpha(opacity=100);" alt="夏の女性">

夏の女性
<img src="sample/filter_image3.jpg" style="filter:alpha(opacity=60);" alt="夏の女性">

夏の女性
<img src="sample/filter_image3.jpg" style="filter:alpha(opacity=20);" alt="夏の女性">

夏の女性