CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装
コラム
今回はjQueryを使わないCSS3の装飾のチップス紹介です。
ここのところ、Google様の動きが激しかったり、何かとニュースが途切れないということもあって、Google様に関する情報が優先的になっておりました。
さてさて。
今回の装飾はコピペだけで対応出来てしまいます。
ただ、ぼくも個人的に初めての記述がありましたので、その部分について、何かしら学んでいただければと思う次第です。
CSS Chipsに投稿したコラム記事
CSS3でフォントを装飾、「[CSS3] Neon Glow」を実装
![[CSS3] Neon Glowサイトイメージ](/column/img/column_157_180801.png)
[CSS3] Neon Glowは、フォントを装飾するためのCSSのフレームワークです。
非常に簡単でして、コピペするだけでお使いいただけます。
派手な装飾を探しているところ、見つけた次第です。 本家サイトでは、アルファベットを装飾していますね。 googleフォントを使って、面白いフォントのアルファベットを装飾してるので、余計に映えて見えますね。
ということで、日本語にも実装してみました。
フォントサイズは基本的に大きい方がいいかもしれません。
そういうニュアンス的な部分も含めて、各々調整してみてくださいね。
本家サイトです。
ファイルは何もダウンロードしません。
phptemp_ng_180801.zip
サンプルです。
トップページの文章部分だけに適応させています。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
以下、本家サイトの「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の動的なチップスを憶えても損はしません・・・どころか、これから求められるスキルかなとも思います。
是非、触って慣れてください！
執筆 : 清水 隼斗
どうなった！？Googleスピードアップデート
