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

CSSで赤いネオングローシャドウ（発光効果）を作成する方法

CSSで赤いネオングロー効果を実現する方法

テキストに赤いネオンの発光シャドウを加えるには、CSSの text-shadow プロパティを使用します。このプロパティを使うことで、文字の周りにぼかしのある影を描画でき、ネオンサインのように光り輝く効果を簡単に表現できます。

text-shadowプロパティの基本構文

text-shadow プロパティでは、以下の値を順番に指定します。

  • 水平方向のオフセット：影を左右にずらす距離
  • 垂直方向のオフセット：影を上下にずらす距離
  • ぼかし半径：影のぼかし具合。数値が大きいほど柔らかく広がる
  • 色：影の色（例：#FF0000 は赤）

水平・垂直のオフセットを「0」に設定し、ぼかし半径のみを指定することで、文字全体が均一に光っているようなグロー効果が得られます。

実装例

以下のコードでは、h1要素に赤いネオングローシャドウを適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            text-shadow: 0 0 4px #FF0000;
         }
      </style>
   </head>
   <body>
      <h1>見出しサンプル</h1>
      <p>上の見出しには、赤いネオングローシャドウ効果が適用されています。</p>
   </body>
</html>

より強いネオン効果を出すコツ

グローをさらに鮮やかにしたい場合は、text-shadow をカンマ区切りで複数指定すると効果的です。ぼかし半径の異なる複数の影を重ねることで、光が幾重にも重なったリアルなネオンの輝きを表現できます。

h1 {
   color: #fff;
   text-shadow: 0 0 4px #FF0000, 0 0 10px #FF0000, 0 0 20px #FF0000;
}

このように、小さなぼかしから大きなぼかしへと段階的に影を重ねることで、中心が明るく外側へ柔らかく広がる、本格的なネオンサイン風の演出が可能になります。ダーク系の背景色と組み合わせると、グロー効果が一層際立ちます。

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

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

  2. CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

    ページの文字色（color）と背景色（background-color）を切り替えるだけで、Webサイトにダークモード／ライトモード機能を簡単に追加できます。本記事では、CSSと少量のJavaScriptを組み合わせて、ボタン操作で表示モードを切り替える実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 基本の構文 ダークモードを適用する場合は、次のような構文を使用します。セレクターに対して文字色を白、背景色を黒に指定することで、暗い環境でも視認性の高い表示を実現できます。 Selector {    color: white;   &nbs