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

CSSフィルターでグロー（発光）効果を実現する方法

グロー（Glow）効果は、オブジェクトの周囲に光がにじみ出るような輝きを作り出すためのCSSフィルターです。透明な画像に適用した場合は、不透明なピクセル部分の外側にグローが生成されます。

グローフィルターで使えるパラメータ

番号パラメータと説明
1.Color
グローとして表示したい色を指定します。カラーコード（例：#00FF00）や色名で設定できます。
2.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: 357px;
         height: 50px;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>
</html>

コードのポイント

  • 画像の例では、Chroma フィルターと組み合わせることで、背景色（#000000）を透明化し、ロゴの輪郭だけに緑色のグローを表示しています。
  • テキストの例では、赤い文字の周囲に Glow(Color=#00FF00, Strength=20) を適用し、鮮やかな緑の光を演出しています。

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

上記の Filter: Glow() は旧Internet Explorer独自の構文のため、現在の主要ブラウザでは動作しません。現代のブラウザで同様の発光効果を実現するには、以下のプロパティを使用するのが一般的です。

  • text-shadow：テキストにグロー効果を追加
    例：text-shadow: 0 0 10px #00FF00;
  • box-shadow：要素全体に光る枠を追加
    例：box-shadow: 0 0 15px #00FF00;
  • drop-shadow() 関数：標準の filter プロパティで画像などに影・光を追加
    例：filter: drop-shadow(0 0 8px #00FF00);

これらの標準プロパティを使えば、Internet Explorer以外のすべてのモダンブラウザで一貫したグロー効果を実現できます。

  1. CSSで実装するウォブル（揺れ）アニメーション効果の作り方

    CSSの@keyframesとtransformプロパティを組み合わせることで、要素を左右に揺らす「ウォブル（wobble）アニメーション」を簡単に実装できます。移動と回転を段階的に変化させることで、まるで物体がぐらついているような自然な動きを表現できるのが特徴です。 以下のサンプルコードを実行して、実際のアニメーション効果を確認してみましょう。 サンプルコード <html>    <head>       <style>          .animate

  2. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {