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

CSSでオブジェクトの周りにグロー（発光）効果を作成する方法

グロー効果とは、オブジェクトの周囲に光が滲んだように見える装飾効果です。透明画像に対して適用した場合、不透明なピクセル部分の周りにグローが生成されます。

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

パラメータ説明
Colorグローの色を指定します。
Strengthグローの強さを指定します（1〜255の範囲）。

記述例

以下のコードを実行すると、オブジェクトの周りにグロー効果を作成できます。

<html>
   <head>
   </head>

   <body>
      <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">

      <p>テキストの例：</p>

      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>

</html>

注意：モダンブラウザでの代替手段

上記の Glow() フィルターは Internet Explorer 専用の独自拡張であり、現在は非推奨となっています。最新のブラウザで同様の発光効果を実現するには、標準のCSSプロパティを使用しましょう。

テキストにグローを付ける場合：text-shadow

.glow-text {
  color: red;
  text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00;
}

要素全体にグローを付ける場合：box-shadow

.glow-box {
  box-shadow: 0 0 15px #00FF00;
}

text-shadow や box-shadow はすべての主要ブラウザでサポートされており、ぼかしの範囲や色を自由に調整できるため、現在のWeb制作ではこちらの方法が標準となっています。

  1. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1