ＨＰ作成実録 No.16

スタイルシートを使う (フィルタ)

shinがトップページで使っている、スタイルシートの記述方法です。
当たり前ですが、ココに書いてある事はスタイルシートのごく一部です。
でも比較的良く見るモノもあると思います。
このページも説明のために同様の記述をしています。
もし上手く表示されなかった方がいたら、すいません、教えて下さい。
ここは画像やテキストに対するフィルタの説明です。
画像はgifで背景が透明、上下左右に余白が５ピクセルあります。

フィルタをかけない状態では画像は

で、文字は

styleです。

      add= ブレた上に元の画像(文字)を上書きするかどうかで、trueかfalseで選択。
direction= 角度の指定。上が0。
 strength= ブレの強さの指定。1〜10位まで。

<img STYLE="filter:Blur(add=true,direction=45,strength=8)" src="style.png">
add=true→		add=false→

<img STYLE="filter:Chroma(color=#0000ff)" src="style.png">
青(0000ff)を指定→		緑(00ff00)を指定→

<img STYLE="filter:Chroma(color=#0000ff) Chroma(color=#00ff00)" src="style.jpg">
元の画像→		青と緑を指定→

    color= 影の色を指定。
     offX= 影を表示する（左右の）位置を指定。
     offY= 影を表示する（上下の）位置を指定。
 positive= trueかfalseで選択。trueは透明部分は無視、falseは画像の透明部分に影を付ける。

<img STYLE="filter:DropShadow(color=#777777,offX=5,offY=5,positive=true)" src="style.png">
positive=true→		positive=false→

    color= 影の色を指定。
direction= 角度の指定。上が0。

<img STYLE="filter:Shadow(color=#777777,direction=45)" src="style.png">
direction=45→		direction=90→

<img STYLE="filter:FlipH()" src="style.png">
FlipH()→		FlipV()→

    color= 縁取りの色を指定。
 strength= ブレの強さの指定。1〜10位まで。

<img STYLE="filter:Glow(color=red,strength=2)" src="style.png">
color=red→		color=black→

<img STYLE="filter:Gray()" src="style.png">
Gray()→		Xray()→

<img STYLE="filter:Invert()" src="style.png">
Invert()→		Light()→

    color= 透明部分に塗る色を指定。

<img STYLE="filter:Mask(color=orange)" src="style.png">
color=orange→		color=pink→

          add= 効果を付けた上に元の画像(文字)を上書きするかどうかで、trueかfalseで選択。
         freq= 波の数を指定。
lightStrength= 光の強さを0〜100の範囲で指定。
        phase= 波の開始位相を0〜360の範囲で指定。
     strength= 波の強さを指定。1〜10位まで。

<img STYLE="filter:Wave(add=true,freq=3,lightStrength=50,phase=0,strength=2)" src="style.png">
strength=2→		strength=5→

▲MENUに戻る