Membuat Shape Yin-Yang dengan CSS

12/03/2018    Risman Hakim    300     Website

Membuat Shape Yin-Yang dengan CSS - Terkadang dalam menata web dengan manambahkan objek berupa gambar, ataupun icon akan berpengaruh pada kinerja website. Tentu semakin banyak gambar yang dimuat akan membuat web semakin lambat, ada beberapa cara yang bisa dipakai untuk meminimalisir kinerja website agar lebih stabil dan tidak terlalu menjadi lambat, yakni dengan memanfaatkan icon - icon dari pihak ketiga seperti font awesome dan lain sebagainya. Tetapi ada cara lain juga yang bisa kita pakai untuk membuat bentuk icon dengan bantuan CSS. Seperti pada tutorial berikut akan saya jelaskan bagaimana Membuat Shape Yin-Yang dengan CSS, tentu ini akan sedikit mengurangi beban web agar tidak menjadi lambat karena tidak menggunakan gambar melainkan bentuk (shape) yang dibuat dengan CSS. Langsung saja kita praktekan berikut ini.

Langkah 1 : Membuat Shape Yin-Yang dengan CSS

Seperti nama judul diatas, pada kasus yang akan kita buat adalah shape yin-yang dan nantinya diharapkan kalian bisa mengeksplore bentuk - bentuk lainnya dengan CSS. Baik, kita mulai langkah pertama yaitu dengan membuat struktur awal terlebih dahulu untuk shape yin - yang dengan sintak HTML berikut.

<body>
    <div id="wrapper">
        <div class="yinyang"></div>
    </div>
</body>

Langkah 2 : Membuat Shape Yin-Yang dengan CSS

Langkah berikutnya, tentu kita akan buatkan shape dengan sintak CSS, dimana struktur diatas akan dimanipulasi sedimikian rupa sehingga menjadi bentuk (shape) yin - yang.

.yinyang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: #25354A;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    transform: rotate(65deg);
}
.yinyang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid #25354A;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.yinyang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #25354A;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

Setelah semua sintak diatas telah diketikan semua, simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat seperti gambar dibawah ini.

Membuat Shape Yin-Yang dengan CSS

Baiklah, cukup sekian tutorial Membuat Shape Yin-Yang dengan CSS, semoga bermanfaat dan selamat mencoba :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More