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>
Rujukan CSS di codepen.io/kassandrasanch/pen/xxmVzPP
Ulasan