Corredor

ウェブ、プログラミングの勉強メモ。

CSS text-shadow でネオン発光風のテキストを実装する

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像

  • 作者: こもりまさあき,栄前田勝太郎,坂上北斗,塚口祐司,前川昌幸,松田直樹
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2017/09/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

今更かもしれないけど、text-shadow でネオン発光している感じのテキストを実装する。

See the Pen Glow Link Examples by Neos21 (@Neos21) on CodePen.

黒い背景に、ネオンっぽいカラーを選ぶのがコツ。文字色 (color) よりも薄めの色を text-shadow にかける。

text-shadow が薄め、もしくは綺麗じゃないと思ったら、以下の CodePen で紹介しているようなやり方で濃い目のぼかしを付けると良い。

See the Pen Good Text-Shadow by Neos21 (@Neos21) on CodePen.