サイト内検索

...スタイルシート(css)...

スタイルシート・フィルタ

ブレを作る

ブレを作るフィルタは、blurプロパティを指定します。
ブレの強さや方向を指定できます。
[使い方]
［スタイルシート]
.sample{
filter: blur(add=true, direction=90, strength=10);
}
［ｂｏｄｙの中］
<img src="../img/sample.jpg" class="sample">
ＩＥのみに対応しています。
[メモ]
strength・direction・addは、
W3C・CSS検証サービスでは、推奨されていません。
プロパティ名 説明
add ブレの上に元の内容を重ねるかどうか
0（false） = 重ねない。
1（true） = 重ねます、
direction ブレの方向（45度単位）
0=上
45=右上・・90=右・・135=右下
180=下
225=左下・・270=左・・315=左上
strength ブレの長さ（ピクセル）
enabled 0/false (1)フィルタを実行しない。
1/trueフィルタを実行します。

サンプル

フィルタを使用していない状態
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;">
☆★文字★☆
</div>

《ｂｏｄｙに直接書いた場合》

ブレの距離
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style=" filter: blur(strength=30);">

☆★文字★☆

<div style="width: 100%; padding-left: 30px;
filter: blur(strength=30);">
☆★文字★☆
</div>

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;
padding-left: 10px; filter: blur(strength=10);">
☆★文字★☆
</div>


ブレの方向
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style=" filter: blur(direction=0, strength=30);">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;
padding-bottom: 10px;
filter: blur(direction=180, strength=10);">
☆★文字★☆
</div>


左右にぼかす
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style=" filter: blur(add=false, direction=315, strength=20);">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;
filter: blur(add=false, direction=90, strength=15);">
☆★文字★☆
</div>

Copyright c 2007.10.01 luc All rights reserved.