光る Part.1

この記事はCommune Advent Calendar 2024シリーズ2 9日目の記事です

最近とにかく光らせるのが流行ってますよね。
光っているとなんだか魅力的。
なので、私も光らせテクニックを習得していきたいと思います。

その1. ベースは暗く

光を表現するにはまず影を作るべし。
ということで、背景色等ベースは暗い色にします。

特別なことはなにもしていませんが、「画像が明るいな」とは思うはずです。事実、ディスプレイは光っています。

その2. blurで拡散光を作る

画像にblurをかけることで、ぼやけると同時に拡散されます。

これの上にもとの画像を重ねれば、光ってるっぽくなります。

div.anochick:before {
  content: "";
  border-radius: 256px;
  width: 256px;
  height: 256px;
  top: 0;
  left: 0;
  position: absolute;
  background: inherit; // ここがポイント
  filter: blur(16px);
}

というようにbackground: inheritを使って記述量を冗長にしないテクニックなんかもあります。

光ってる！

その3. ゲーミング

枠を虹色に光らせる「ゲーミングエフェクト」をつけるとなんでも派手にすることが出来ます。

7色のconic-gradientを使うのが良いです。
枠だけでなく、blurで拡散させること、周期的に明るさが変わったりゆっくり回転させたりなどすると更に光っている感じが増します。

ただし、ゲーミングエフェクトをかける場合は内側もあるていど暗くないと光ってる感じがでません。

画像を暗くするといい感じ！

今回使ったコードは以下で共有します。

みなさんの光らせテクニックも教えて下さい！