CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSフィルターで画像やテキストをぼかす方法（モーションブラーの使い方）

CSSのモーションブラー（Motion Blur）フィルターを使うと、方向と強さを指定して、画像やテキストにぼかし効果を加えることができます。

このフィルターでは、以下のパラメータを使用できます。

No.パラメータと説明
1Add
True または false を指定します。true の場合は元の画像がぼかした画像に重ねて表示され、false の場合は元の画像はぼかし効果に含まれません。
2Direction
ぼかしのかかる方向を時計回りに45度刻みで指定します。デフォルト値は 270（左方向）です。
0 = 上
45 = 右上
90 = 右
135 = 右下
180 = 下
225 = 左下
270 = 左
315 = 左上
3Strength
ぼかしが伸びる距離をピクセル数で指定します。デフォルト値は5ピクセルです。

サンプルコード

以下のコードを実行すると、画像とテキストにぼかし効果を適用できます。

<html>
   <head>
   </head>
   <body>
      <img src = "/css/images/logo.png" alt="CSS Logo" style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      <p>テキストの例：</p>
      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: blue;
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>
   </body>
</html>

補足：モダンなCSSでのぼかし表現

上記の Filter: Blur() 構文は、Internet Explorer 専用の旧式フィルターであることに注意してください。現在の標準的なブラウザでは、CSS3で導入された filter プロパティを使用します。

たとえば、次のように記述することで、同様のぼかし効果を実現できます。

img {
  filter: blur(4px);
}

また、blur() に加えて drop-shadow() や opacity() などの関数も組み合わせられるため、より柔軟な視覚効果を作成できます。現代のWeb開発では、クロスブラウザ対応の観点からこちらの標準プロパティを使うことをおすすめします。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ