Search articles, tutorials, tips...
Kuasai seni CSS satu elemen dengan membuat simbol Yin-Yang klasik yang berputar. Tutorial ini menguraikan cara menggunakan gradien, elemen semu (pseudo-elements), dan keyframe CSS untuk membuat geometri kompleks tanpa gambar.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Mari berkenalan dengan hibuno.com sebuah portofolio pribadi Muhibbudin Suretno. Yang menampilkan artikel, tutorial, maupun proyek sumber terbuka secara gratis.
Analisis mendalam tentang gradien CSS yang kompleks dan latar belakang ganda untuk menciptakan Jolly Roger ikonik Bajak Laut Topi Jerami. Karya seni ini tidak menggunakan gambar atau SVG.
Dalam tutorial ini, kita akan membuat simbol Yin-Yang yang berputar. Meskipun terlihat seperti grafik yang rumit, simbol ini dapat dibangun sepenuhnya menggunakan CSS dan satu elemen HTML saja. Ini adalah latihan yang sempurna untuk memahami elemen semu (::before dan ::after) dan gradien CSS.
Untuk membangun Yin-Yang tanpa gambar, kita perlu memikirkan geometrinya:
Kita hanya membutuhkan satu wadah (container). Kita akan menggunakan sebuah div dengan kelas yin-yang.
<div class="balance"></div>Pertama, kita atur gaya untuk bodi utamanya. Alih-alih menggunakan trik border yang rumit, kita menggunakan linear-gradient untuk membagi latar belakang secara sempurna menjadi dua bagian.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #363588;
}
.balance {
width: 100px;
height: 50px;
background-color: white;
border: 4px solid black;
border-bottom-width: 52px;
border-radius: 100%;
position: relative;
box-sizing: content-box;
animation: rotate 3s infinite linear;
}Sekarang kita gunakan ::before dan ::after untuk membuat dua lingkaran di dalam. Kita menggunakan trik border di sini: background-color menciptakan titik kecil di dalam, sedangkan border menciptakan bagian pusaran lingkaran tersebut.
/* The top white/black swirl with a black dot */
.balance::before,
.balance::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12.5px; /* The size of the inner dot */
height: 12.5px;
background-color: white;
border: 18.8px solid black; /* The border creates the black head */
border-radius: 100%;
box-sizing: content-box;
}
.balance::after {
left: 50%;
background-color: black;
border-color: white; /* The border creates the white head */
}Terakhir, kita definisikan keyframes untuk membuat simbol berputar terus menerus.
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}Dengan menggabungkan gradien linear pada elemen induk dan elemen semu yang dipusatkan menggunakan border tebal, kita berhasil membuat animasi Yin-Yang yang skalabel dan tidak pecah (resolution-independent) tanpa menggunakan JavaScript sama sekali.