ゲーミングPCっぽく光るCSSのレシピ

これは何

• ふと「ゲーミングPCっぽい光り方をCSSで書けないかな〜」と思って作ってみたものです
• あまり実用性はありません、一発芸としてご認識ください

完成品

このように光ります

See the Pen Like a gaming pc by Keisuke Watanuki (@xrxoxcxox) on CodePen.

作り方

1. 背景を用意する

• 白背景だと「光ってる」感の演出が難しいので、背景を暗くします
  • この段階のスクショだと何も分かりませんね

index.html

<div class="container"></div>

scss:style.scss .container { background-color: #000; display: grid; height: 400px; place-items: center; width: 100%; }

• Tips
  • display: grid;とplace-items: center;の2行だけで上下中横揃えができます

2. @keyframesを用意する

• 色の変化を定義しています

style.scss

@keyframes rainbow {
  0% {
    background-color: red;
  }
  14% {
    background-color: orange;
  }
  28% {
    background-color: yellow;
  }
  42% {
    background-color: green;
  }
  56% {
    background-color: aqua;
  }
  70% {
    background-color: blue;
  }
  84% {
    background-color: purple;
  }
  100% {
    background-color: red;
  }
}

3. メインの光を用意する

• 静止画なので伝わりづらいですが、この段階で7色に変化するボックスが完成しています

index.html

<div class="container">
  <div class="box"></div>
</div>

scss:style.scss .box { animation: rainbow 5s infinite; filter: blur(10px); height: 120px; position: relative; width: 120px; will-change: filter; }

• Tips
  • フチをfilter: blur(10px);とぼかすことで、光の表現っぽくなります
  • will-change: filter;はスタイリングには必要ないのですが、iOS Safariではこういった記述をしないと上手く表示してくれないので記載しています

4. 中心の光り方に変化をもたせる

• すごーく微妙な差ですが、均一な光り方だったのに対し、今は中心の色を少し変えています
  • 実際のゲーミングPCの画像を見ると、中心が少し明るかったのでそれを再現しています

style.scss

.box {
  &::before {
    background:
      radial-gradient(
        yellow,
        transparent
      );
    content: "";
    height: 100px;
    left: 10px;
    mix-blend-mode: overlay;
    position: absolute;
    top: 10px;
    width: 100px;
  }
}

• Tips
  • yellowからtransparentへと色が変化する円形のグラデーションを先ほどのボックスに重ねて配置
  • mix-blend-mode: overlay;で良い感じに色が混ざるように指定

5. 光り方にエッジをつける

• 今は周辺を単にぼかしているだけですが、実際はそんなに簡単な表情でもありません
  • 光るパネルがあるとして、パネルの幅まではエッジの効いた光り方、それより外側に少し光がもれて輪郭がぼやっとする、そんなイメージです

style.scss

.box {
  &::after {
    animation: rainbow 5s infinite;
    content: "";
    height: 100px;
    left: 10px;
    mix-blend-mode: screen;
    position: absolute;
    top: 10px;
    width: 100px;
  }
}

• Tips
  • 最初に作った光の枠よりひとまわり小さな光を用意します
  • mix-blend-mode: screen;で際立たせます

完成

• 最初に載せたものと同じですが、改めて全てを合わせるとこのように光ります
• 背景以外は1つのdivだけで作れます
  • ゲーミングPCっぽいあしらいを作りたいなあと思ったときにいかがでしょうか

See the Pen Like a gaming pc by Keisuke Watanuki (@xrxoxcxox) on CodePen.