Sebiji bola di laman catatan

Imej: Google Doodles

Catatan ini dibuat pada pagi ini, 1:00 pagi Khamis, 31 Ogos, Hari Kebangsaan Malaysia 2023. Jadi, Selamat Hari Merdeka!

Sebiji bola di laman catatan ..

Adakah tajuk ini membawa maksud yang sama dengan pepatah 'elephant in the room'? Oh, tidak, sekali-kali tidak. Bola di sini adalah demo CSS - bagaimana nak 'melukis'nya dengan CSS.

Demo

HTML view ▼

<div class="labu">
<div class="bks">
  <div class="bola"></div>
</div>
</div>
<style>
  .labu {
    width: 100%;
  }
  .bks {
  width: 100%;
  height: 60vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.bks .bola {
  background: lightgray;
  width: 400px;
  height: 400px;
  border-radius: 50%;
}
.bks .bola:before {
  background-image: radial-gradient(circle at 35% 28%, white, rgba(0, 0, 0, 0.6));
  content: "";
  width: 400px;
  height: 400px;
  border-radius: 50%;
  z-index: 0;
  position: absolute;
  box-shadow: 0 15px 2px -10px rgba(0, 0, 0, 0.01), -35px 90px 210px 2px rgba(0, 0, 0, 0.56), 45px 65px 50px -35px rgba(0, 0, 0, 0.56);
}
.bks .bola:after {
  background-image: radial-gradient(circle at 38% 40%, white, rgba(0, 0, 0, 0.7));
  content: "";
  width: 400px;
  height: 400px;
  border-radius: 50%;
  z-index: 0;
  position: absolute;
}
@media only screen and (max-width: 600px) {
  .bks .bola {
    width: 250px;
    height: 250px;
  }
  .bks .bola:after {
    width: 250px;
    height: 250px;
  }
  .bks .bola:before {
    width: 250px;
    height: 250px;
  }
}
</style>

Tutup

Rujukan CSS di codepen.io/kassandrasanch/pen/xxmVzPP