ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか？
雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風＝虹色に光る文字を作ります。
実用性はあまりないので、ネタとしてご覧ください。
作り方
作り方としては、大きく分けて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:4slinear0sinfinitealternateslide;/* slideアニメーションを4秒で往復の線形移動を無限回行う */}@keyframesslide{from{background-position:0%0%;}to{background-position:100%0%;}/* 右から左へ移動するアニメーション */}これで、gamingクラスを適用した箇所が、色が変わりながら光る文字ようになります。
ぜひ試してみてください。
