Andsp.ID
Just another blog And powered by Blognive.com
Cara membuat lingkaran dengan CSS
Posted by Andreas Pandu Pamungkas at 14 September 2018 22:12
Category: Others, Tutorial
Aplikasi legit penghasil pulsa yang sedang viral disini !!!


Aloo sobat Andsp :V kali ini saya sebagai admin disini, ingin membagikan tutorial, bagaimana sih cara membuat lingkaran pada css. Sebenarnya sih mudah, kalau ada niat mau belajar disini :V wakakak, oke langsung saja untuk tutorialnya.

1. Kita buat halaman buat uji cobanya. Jadi, dimana-mana kalau ingin belajar, kita harus menyiapkan dari. Jadi sama halnya kalau mencoba kita harus menyiapkan yang akan dibuat bahan uji cobanya. Berikan halaman tersebut dengan format html

2. Jika sudah membuat halamannya, silahkan copas :V teks dibawah ini:

 

border-radius:50%;
-webkit-border-radius:50%



Mengapa harus 50%?, jadi membuat lingkaran pada css memang harus mengisi dengan angka 50% tersebut, agar membentuk sudut lengkung yang sangat menekuk.

3. Coba kita uji coba menggunakan, gambar berikut:

 



Lalu kita pasang kode seperti di nomer 2, jadi hasilnya seperti ini:

 

<img src="https://www.blognive.com/assets/images/profile/2/thumbnail.jpg" style="border-radius:50%;-webkit-border-radius:50%" />



Atau juga bisa pakai kode <style>, jadi kodenya jadi begini:

 

<style type="text/css">
.gambar-lingkar {
border-radius:50%;
-webkit-border-radius:50%
}
</style>

<img src="https://www.blognive.com/assets/images/profile/2/thumbnail.jpg" class="gambar-lingkar" />



4. Jika sudah, saatnya simpan dan hasil seperti berikut:

 



5. Gambar lingkaran sudah jadi, mudah bukan? Anda juga bisa menerapkan pada kode <div>, tidak gambar saja yang bisa dibuat lingkaran, div juga bisa, dengan mengukur panjang, dan tinggi. Lalu beri kode seperti di nomer 2 tadi, hasilnya akan membentuk lingkaran juga

6. Kalau kita pakai div, contoh tagnya seperti berikut:

 

border-radius:50%;
-webkit-border-radius:50%;
width:100px;
height:100px;



7. Kita menggunakan div seperti ini:

 




8. Dan kita coba pasang kode seperti di nomer 6

 

 

<div style="width:100px;height:100px;background:#107efc;border-radius:50%;-webkit-border-radius:50%"></div>



9. Hasilnya seperti berikut jika menggunakan div

 




Sama seperti image, anda juga dapat menggunakan tag <style> pada div.

10. Selesai dah :D


Jika anda masih kurang paham dengan artikel saya, anda dapat membaca secara lengkap di halaman ini.

Mudah bukan? Ya begitulah tutorial dari saya, jika ada kata yang salah, saya meminta maaf. :D
Oke, semoga artikel ini dapat bermanfaat bagi kalian semua yang telah membacanya! Terima kasih, and see you :V

 

Related Posts

Comments

Comments (6), Result comments to "Cara membuat lingkaran dengan CSS"
Andreas Pandu Pamungkas
14 September 2018 22:18
http://www.andsp.id/cara-membuat-lingkaran-dengan-css-.xhtml
Alex samsul
14 September 2018 22:25
mantap min boleh di uji.,
Kenjie
14 September 2018 22:40
mantap min, enak nih buat nambah wawasan tentang css
Zaini
15 September 2018 05:43
Pakai bootstrap 4 malah lebih enak. tinggal tambahkan .rounded-circle class pada gambar yang diinginkan.
Andreas Pandu Pamungkas
15 September 2018 10:27
@zaini, bagi yang ga suka/blom tau bootstrap, kan bisa mencoba ini
Kentang Hijau
15 September 2018 11:21
Saya juga pake metode di atas untuk membuat elemen html yang bundar

New comment

Sign in with My account

Name *


URL *


Content *
(Some BBcode tags allowed)

captcha

This comment is not spam