フロントエンジニアが本気でCSSだけで「リアルなビー玉」を作る

どうも7noteです。再現シリーズ今回はビー玉に挑戦してみました。

ビー玉、水晶玉、ガラス玉、、、今回のはなかなかの力作です。
鏡餅を作った時とは比にならないくらいリアルに作れました・・・

いったいなんの役に立つかわからないですがただただ楽しいですね。

ソース

index.html

<div class="b-dama"></div>

style.css

.b-dama {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #182879;
  background-image: radial-gradient(90% 90% at 65% 80%, #48bffe 20%, transparent);
  box-shadow: -7px -20px 7px -10px rgba(26,68,111,0.9) inset, 0px 30px 5px -10px rgba(0,0,0,0.3), inset 0 0 10px 0px #fff, inset 0 0 25px 0px #fff;
  position: relative;
}

.b-dama::before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  background: radial-gradient(12% 9% at 42% 21%, #fff 45%, transparent), radial-gradient(8% 3% at 52% 95%, #53FAFF 15%, transparent);
  box-shadow: -2px 67px 8px -40px #dbf2ff;
  transform: rotate(-33deg);
  position: absolute;
}

まとめ

個人的に気に入っているのは光が透けてちゃんと地面に水色の光が差し込んでいるあたりですかね。
また思いついたらいろいろ書いてみたいと思います。

参考：https://oekaki-zukan.com/articles/7902

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ