| ■ 文字列に影をつける [スタイルシート] |
|
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="コーヒーを飲む女の子">
|
| ■ 画像にＸ線効果 [スタイルシート] |
<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="夏の女性">
|
