Membuat Lingkaran Dengan CSS

Posted by Unknown

» 2015-08-24

Mad Trik - Memang benar ya CSS3 ini bisa membuat apa saja, mulai dari long shadow ala desain flat masa kini, teks 3D, sampai bikin wajah Simpsons pun juga bisa (asalkan kamu pintar mainin CSS ini). Dan pada tutorial kali ini kita akan melihat tutorial untuk membuat lingkaran dengan CSS yang sudah dijelaskan di blognya Matt Lambert.

Bisa dibilang cukup mudah dan lebih gampang membuatnya daripada membuat lingkaran dengan gambar. Jika dibuat dengan gambar akan lebih banyak mendapatkan kekurangan daripada kelebihannya.

Kelebihannya:

Bisa di modifikasi sedemikian rupa, sesuai selera,
dll,.

Kekurangannya:

Akan berimbas pada kecepatan muat situs atau blog kamu,
Susah bagi yang tidak mahir dalam dunia desain.
dll.

Lagipula jaman sekarang masa masih saja pakai gambar, move on dong. Sekarang kan sudah jamannya desain datar dan lain-lain.

Bagaimana tertarik untuk melihat tutorialnya ? baiklah saat kita lihat bersama-sama:

.lingkaran-penuh {
 background-color: #c06;
 height: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

CSS diatas akan membuat sebuah elemen yang berbentuk lingkaran penuh. Contohnya bisa dilihat dibawah ini:

Dan untuk memberikan sedikit garis batas atau border agar terlihat keren sedikit, kamu akan membutuhkan CSS yang seperti ini:

.lingkaran-penuh {
 background-color: #c06;
 border: 3px solid #333;
 height: 150px;
 width: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
}

Contohnya bisa kamu lihat dibawah ini:

Ada lagi nih. Untuk membuat warna latarnya transparan kamu juga bisa menggunakan kode CSS yang ada dibawah ini:

.lingkaran-penuh {
 background-color: rgba(204, 0, 102, 0.5);
 border: 3px solid #333;
 height: 150px;
 width: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
}

Hasilnya akan seperti ini:

Masih kurang ?

Apa masih kurang, baiklah mungkin tutorial yang terakhir ini bisa membuat keingin tahuan kamu terpenuhi. Tapi bukan sebuah lingkaran yang akan saya jelaskan, melainkan sebuah setengah lingkaran:

.setengah-lingkaran {
 background-color: #00afaf;
 height: 150px;
 width: 75px;
 -moz-border-radius: 150px 0 0 150px;
 border-radius: 150px 0 0 150px;
}

Contohnya seperti ini:

Ada lagi untuk membuat bentuk lingkaran yang seperempat:

.lingkarannya-seperempat {
  background-color: #00afaf;
  height: 150px;
  width: 150px;
  -moz-border-radius: 150px 0 0 0;
  border-radius: 150px 0 0 0;
}

Hasilnya seperti ini:

Menambah tulisan didalam lingkaran ?

Gampang kok, meskipun om Matt tidak menjelaskan didalam artikelnya, tapi beliau sudah membuatnya di Jsfiddle miliknya:

.lingkarannya-dengan-tulisan {
    background-color: #00afaf;
    color: #fff;
    height: 150px;
    width: 150px;
    text-align: center;
    font-size: 60px;
    line-height: 150px;
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
}

Beginilah hasil akhirnya:

Nah, sudah puaskan dengan tutorial kali ini. Makanya agar tetap melihat tutorial yang tidak kalah kerennya lagi, jangan lupa ikuti blog ini.