当サイトは旧サイトです。新サイト・新ページは semlaboratory.jp/column/ にアクセスいただきますようよろしくお願いいたします。

HOME > コラム > CSS Chips > CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装

CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装

コラム

久しぶりになってしまいましたPHP簡単WEBサイトテンプレート（PHP）を使ったチップス紹介！
今回はjQueryを使わないCSS3の装飾のチップス紹介です。
ここのところ、Google様の動きが激しかったり、何かとニュースが途切れないということもあって、Google様に関する情報が優先的になっておりました。
さてさて。
今回の装飾はコピペだけで対応出来てしまいます。
ただ、ぼくも個人的に初めての記述がありましたので、その部分について、何かしら学んでいただければと思う次第です。
「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

CSS Chipsに投稿したコラム記事

CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装

[CSS3] Neon Glowとは

[CSS3] Neon Glowは、フォントを装飾するためのCSSのフレームワークです。
非常に簡単でして、コピペするだけでお使いいただけます。

派手な装飾を探しているところ、見つけた次第です。 本家サイトでは、アルファベットを装飾していますね。 googleフォントを使って、面白いフォントのアルファベットを装飾してるので、余計に映えて見えますね。

ということで、日本語にも実装してみました。
フォントサイズは基本的に大きい方がいいかもしれません。

そういうニュアンス的な部分も含めて、各々調整してみてくださいね。

本家サイト

本家サイトです。
ファイルは何もダウンロードしません。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_ng_180801.zip
組み込み済みサンプル

サンプルです。
トップページの文章部分だけに適応させています。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
CSSソースをコピペ

以下、本家サイトの「RED」を装飾している部分だけを抜粋した内容です。
サンプルファイルでは「キャッチコピーを入れましょう」の部分です。 

#main {
	text-decoration: none;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;

	color: #fff;
	font-family: Monoton;
	-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
	-moz-animation: neon1 1.5s ease-in-out infinite alternate;
	animation: neon1 1.5s ease-in-out infinite alternate;
	font-size: 3.5em;
}

#main:hover {
	color: #FF1177;
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}

/*glow for webkit*/

@-webkit-keyframes neon1 {
from {
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}

/*glow for mozilla*/

@-moz-keyframes neon1 {
from {
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}

/*glow*/

@keyframes neon1 {
from {
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}

次に、「BLUE」の部分を装飾している内容を抜粋します。
サンプルファイルでは「最も言いたいことを書いてください」の箇所です。 

#tokushu {
	background-color: #222222;
	background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
}

#tokushu h2 {
	text-decoration: none;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	font-size: 3.5em;
	color: #228DFF;
	font-weight: bold;
}

#tokushu h2:hover {
	-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
	-moz-animation: neon2 1.5s ease-in-out infinite alternate;
	animation: neon2 1.5s ease-in-out infinite alternate;
	color: #fff;
}

/*glow for webkit*/

@-webkit-keyframes neon2 {
from {
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}

/*glow for mozilla*/

@-moz-keyframes neon2 {
from {
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}

/*glow*/

@keyframes neon2 {
from {
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}

CSSの装飾はデバイスを選ぶことはないと思いますので、共通ファイルを一つ追加し、全体で読み込ませています。

最後は確認と注意すべきポイント

このCSSによって、単に装飾されたかどうかだけの確認では、確認不足となります。

フォントにカーソルを当て、そのままにしておくと、光って見える影の部分が動いています。
そうなんです。
光の量が増減しているように見えるんですね。

上記のCSSの中にある「form」や「to」など見慣れない記述がありますよね。
これらが動的になる部分の要素の装飾を記述しているところです。
その前の記述で、その部分の記述を呼び出すという記述が見受けられます。
全体の流れを見て理解してくださいね。

CSS3はだいぶ細かいことまでできるようになっているので、このようなCSS3チップスに慣れていってくださいね。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_180606.zip 」です。
締め

いかがでしたでしょうか？

コピペするだけですので、簡単っちゃ簡単ですが、全体の流れを理解しなければいけないポイントがありましたよね。
CSSが徐々にプログラムっぽくなってきたように思います。

CSS3だけで動的に要素を見せることができるようになってきています。
なかなか難しいですが、慣れていきたいところです。

最近、Google様はスマホでの表示速度やレンダリングに関する技術的な対応を、ウェブマスターに求めてきていると思います。
やはり装飾がCSSのみになると軽いですからね、CSS3の動的なチップスを憶えても損はしません・・・どころか、これから求められるスキルかなとも思います。

是非、触って慣れてください！

執筆 : 清水 隼斗

CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装の通常ページ

「CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装」のシェアをお願い致します！