【HTML・CSS】ゲーミングな文字を作ります

ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか？
雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風＝虹色に光る文字を作ります。
実用性はあまりないので、ネタとしてご覧ください。

作り方

作り方としては、大きく分けて2段階あります。

1. 背景を文字で切り抜く
2. 背景に虹色を適用する

以上の順で、作成していきます。

背景を文字で切り抜く

背景を文字で切り取るには、CSSのbackground-clipを使います。
これは背景を適用する範囲を決めるプロパティです。（参考）
使用できる値には以下があります。

• border-box : 境界の外側の辺まで背景を表示する
• padding-box ： パディングの外側の辺まで背景を表示する
• content-box ： コンテンツのみ背景を表示する
• text ： テキスト部分のみ背景を表示する

このうち、textを使うことで、背景を文字にすることができるようになります。
また、文字の色を透明にすることを忘れないようにしましょう。切り取った背景が文字で見えなくなってしまいます。

style.css

.gaming{
    color: transparent;             /*文字を透明にする*/
    background-clip: text;          /*背景を文字で切り抜く*/
    background-image : hogehoge     /*文字にしたい背景を入れる*/
}

背景に虹色を適用する

背景を虹色にするにはグラデーションを使います。（参考）
background-imageプロパティにlinear-gradientを使うことでグラデーションを作ることができます。
ここで注意しないといけないのが、backgroundでも背景をグラデーションにできます。
が、background-clipはbackgroundで指定した背景を切り取ることができません。必ずbackground-imageプロパティに指定しましょう。

style.css

.gaming{
    color: transparent;             /*文字を透明にする*/
    background-clip: text;          /*背景を文字で切り抜く*/
    background-image : linear-gradient(45deg,
        red,
        orange,
        yellow,
        green,
        aqua,
        blue,
        purple);
}

これで文字が虹色になりました。
さらにアニメーションをつけてゲーミング感をアップさせます。
animationプロパティで、アニメーションをつけることができます。
詳細はこちらを参照してください。
下の例では、4秒で左右に無限回往復移動するアニメーションになっています。

style.css

.gaming{
    font-size: 36px;
    color: transparent;             /*文字を透明にする*/
    background-clip: text;          /*背景を文字で切り抜く*/
    background-image: linear-gradient(45deg,
        red,
        orange,
        yellow,
        green,
        aqua,
        blue,
        purple);
    background-size: 1200%; 
    animation: 4s linear 0s infinite alternate slide;    /* slideアニメーションを4秒で往復の線形移動を無限回行う */
}

@keyframes slide { 
    from { background-position: 0% 0%; } 
    to { background-position: 100% 0%; }    /* 右から左へ移動するアニメーション */
}

これで、gamingクラスを適用した箇所が、色が変わりながら光る文字ようになります。
ぜひ試してみてください。