Membuat Lingkaran dalam website dengan HTML dan CSS

MEMBUAT LINGKARAN DENGAN HTML DAN CSS

Hallo, kita jumpa lagi dalam tulisan kali ini. Oke, kali ini saya akan share bagaimana cara membuat lingkaran dalam website dengan HTML dan CSS murni tanpa gambar.

Linkaran tentu saja merupakan bentuk yang sering dipake di dalam sebuah website apa lagi website jaman sekarang yang bergaya flat dan elegan. Nah, ketika kita meletekan sebuah lingkaran di dalam website kita dengan sebuah gambar, tentu saja akan mempengaruhi size atau ukuran dari website kita tersebut. Nah, untuk itu kita bisa membuat
 lingkaran itu hanya dengan menggunakan HTML dan CSS.

Nah, fitur membuat lingkaran ini adalah salah satu fitur dari CSS3. Dengan CSS3 kita tidak hanya bisa membuat lingkaran, tapi ada banyak fitur baru yang bisa digunakan untuk mempercantik website kita nanti. Nah, fitur baru yang akan kita gunakan adalah fitur border radius.

Apa itu border radius? Border radius adalah fitur yang memungkinkan kita membuat pojokan dari sebuah elemen menjadi lengkung (round) yang biasanya kotak lancip.


Nah, langsung saja kita buat lingkaran dengan menggunakan fitur border-radius di HTML dan CSS.

Pertama, buat elemen div baru dengan class lingkaran

view plainprint?

1. <div class="lingkaran">  
2. </div>  

Kemudian kita buat style nya di css.

view plainprint?

1. .lingkaran {  
2.     width:100px;  
3.     height:100px;  
4.     background-color:#f00;  
5.     border-radius:50%;  
6.     overflow:hidden;  
7. }  

Nah, itulah cara bagaimana membuat lingkaran dengan html dan css. Bisa dibandingkan, jika kita menggunakan gambar lingkaran, ukurannya bisa beberapa KB, tapi jika kita pake css, size nya kan cuma beberapa byte. Sangat menguntungkan meningkatkan kecepatan load (download) halaman website, dan tentu saja membantu meningkatkan SEO dan membuat pengunjung lebih senang.

Mungkin itu saja yang bisa saya tuliskan kali ini tentang bagaimana cara membuat lingkaran dengan HTML dan CSS. Semoga dapat membantu.

Share on :

Tweet