はじめに
今日はHTMLとCSSを使ったネオン風文字のデザインの実装方法を紹介します。点滅アニメーションと組み合わせて看板風デザインも実装してみます！
デモ
今回実装するネオン文字のデモです↓
点滅アニメーション付きネオン看板のデモです↓
では作り方を解説していきますので、ぜひ一緒にやっていきましょう！
【実践】ネオン風に光る文字を実装する
HTMLとCSSで文字を光らせる
HTMLは光らせたいテキストを準備するだけでOKです！
<p class="neon">ネオン文字デザイン</p>CSSでスタイルを追加していきます。
body {
background: #282020;
background-size: cover;
box-sizing: border-box;
margin: 0;
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}
.neon {
font-weight: 400;
font-size: 30px;
color: #fff;
text-shadow:
0 0 1px #fff,
0 0 20px #cc0022,
0 0 10px #cc0022,
0 0 10px #ff0055,
0 0 60px #ff0040,
0 10px 3px #000;
}ソースコードポイント解説
ネオン文字のポイントは、文字が光を放っているように見せることと影の使い方です。ベースの文字色を白などの明るい色にして、背景は暗くすることもポイントになります！
・text-shadow: 0 10px 3px #000を加えることで浮かんだ文字の影があるように見せています。
【応用】点滅アニメーション付き看板デザイン実装する
点滅アニメーションを追加する
文字は看板風ということでWebフォントを使います。同じにしたい場合は以下のimportを記述してください。font-family: “Meow Script”, cursive;で適用できます。
点滅はCSSアニメーションを使っていきます。
@import url('https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');CSSアニメーション
@keyframes blink {
70% {
color: inherit;
text-shadow: inherit;
}
72% {
color: #333;
}
83% {
text-shadow: none;
}
84% {
color: inherit;
text-shadow: inherit;
}
85% {
color: #333;
text-shadow: none;
}
86% {
color: inherit;
text-shadow: inherit;
}
95% {
color: #333;
text-shadow: none;
}
95.5% {
color: inherit;
text-shadow: inherit;
}
}.neon{
animation: blink linear infinite 2s;
}blinkアニメーションで、一瞬だけ文字を暗くするのと元に戻すのを短い時間で繰り返すことで点滅とちらつきを表現しています。このアニメーションを要素に指定してあげると下のようなイメージになります↓
これだと文字全体が点滅していますね。看板風にするために最後に一工夫してみましょう。文字別にアニメーションをずらし、レイアウトを整えて完成させていきます。
class="logo neon">Ne<span>o</span>nS<span>ig</span>n</p>HTMLはアニメーションをつけたい文字だけ<span>で囲んでおきます。
.neon {
/* Webフォントの指定 */
font-family: "Meow Script", cursive;
font-weight: 400;
font-size: 60px;
color: #fff;
text-shadow:
0 0 1px #fff,
0 0 20px #cc0022,
0 0 10px #cc0022,
0 0 10px #ff0055,
0 0 60px #ff0040,
0 10px 3px #000;
/* 枠線のスタイル */
border: 2px solid #fff;
border-radius: 1rem;
box-shadow: 0 0 1px #fff,
inset 0 0 1px #fff,
0 0 10px #b9c000,
inset 0 0 10px #b9c000,
0 0 20px #b9c000,
inset 0 0 10px #b9c000;
padding: 20px 30px;
}
.neon span {
animation: blink linear infinite 1.4s;
}
.neon span:nth-of-type(2) {
animation: blink linear infinite 2s;
}
/* レイアウトのスタイル */
.logo {
text-align: center;
width: fit-content;
height: fit-content;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
user-select: none;
}neonクラスの要素の中にあるspanで囲まれた部分だけに点滅がつくようになりました。spanで囲んだ要素が２つありますが、それぞれアニメーション速度を変えることでずらして点滅するようになります。
全体レイアウトを整えて枠線も追加することで看板風になりました。text-shadowやbox-shadowの色を変えることで違うネオンのデザインになるのでぜひお好みのデザインで試してみてください！
まとめ
今回はHTMLとCSSアニメーションをで光るネオン文字とネオン看板デザインを作ってみました。CSSでここまで表現できるのはアニメーションの奥深さを改めて感じました！手軽に導入できるアニメーションで、より効果的な見せ方ができるようにしていきたいですね。
