menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/04/19
  • CSS
  • html5

テキストをネオン風にデザインするCSS3 「Neon Glow」

HTML/CSSのみで実装!テキストをネオン風にデザインする「Neon Glow」ご紹介します。
glow

使用方法

「HTML」「CSS」をクリックすると各コードが確認できます。「Result」で実際のエフェクトを確認することができます。「Return」クリックでリロードします。

マウスオーバーでテキストがグロー効果

See the Pen LNrVpb by brightonline (@brightonline) on CodePen.0

CSS

グロー範囲の調節
p {
font-size: 60px;
}
p:nth-child a {
font-size: 0.8em;
}
「P」タグにフォントサイズを設定して、「a」タグで少し小さく設定。


デフォルトでグローさせる場合


p:nth-child(1) a {
color: #fff;
font-size: 0.8em;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}


p:nth-child(1) a:hover {
color: #FF1177;
-webkit-animation: none;
animation: none;
}


マウスオーバーでグローさせる場合


p:nth-child(2) a {
color: #228DFF;
font-size: 0.8em;
}


p:nth-child(2) a:hover {
-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
animation: neon2 1.5s ease-in-out infinite alternate;
}

このポイントだけ抑えていれば簡単に設定できるのでオススメです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11