Membuat Lingkaran Dengan CSS
Siapngoding.my.id - Pada tutorial kali ini kita akan membuat lingkaran menggunakan bahasa pemrograman CSS.
Memang mungkin terdengar sederhana, tetapi pada tutorial kali ini akan lebih menjelaskan tentang pemahaman dari fungsi syntax CSS yang bisa kita manfaatkan untuk membuat lengkungan pada sudut elemen HTML.
Sehingga nantinya akan membentuk lingkaran dengan menetapkan lengkungan penuh pada setiap sudut elemen HTML.
Disarankan untuk sobat yang belum membaca tutorial dasar CSS di siapngoding.my.id agar membaca nya terlebih dahulu di sini. Agar tutorial atau materi yang disampaikan akan mudah dimengerti dan bisa dipahami dengan cepat.
Untuk membuat lingkaran menggunakan CSS caranya sangat mudah. Silahkan sobat simak penjelasan berikut.
Membuat Lingkaran Dengan CSS
Kita akan langsung masuk ke contoh. Di tutorial membuat lingkaran dengan CSS perhatikan syntax CSS dan HTML berikut.
Untuk membuat lingkaran pertama kita akaan membuat element <div>...</div>, serta memberikan class 'lingkaran 1' pada elemen <div>.
HTML
<div class="lingkaran1"></div>CSS
.lingkaran1{
width: 200px;
height: 200px;
background: #dac52c;
border-radius: 100%;
}Maka hasilnya akan menjadi seperti berikut.
Inti dari pembuatan lingkaran dengan CSS ada apada syntax border-radius. Border-radius adalah perintah untuk mengatur radius lengkungan pada sebuah elemen HTML. Pada syntax di atas kita memberikan nilai dengan 100%, sehingga lengkungan yang dihasilkan penuh (sehingga berbentuk bulat).
Coba ubah nilainya menjadi 30% atau terserah sobat. Berikut hasil tampilan bentuk lingkaran yang jika nilai border-radiusnya kita ganti 30%.
Untuk mengubah ukuran lingkarannya sobat bisa langsung mengubah nilai ukuran height dan width nya.
Coding CSS Membuat Lingkaran
Berikut adalah full source codenya.
FULL SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>Membuat Lingkaran Dengan CSS - www.siapngoding.my.id</title>
</head>
<body>
<style type="text/css">
body{
font-family: sans-serif;
}
.lingkaran1{
width: 200px;
height: 200px;
background: #dac52c;
border-radius: 100%;
}
.lingkaran2{
width: 150px;
height: 150px;
background: #2ccada;
border-radius: 100%;
}
</style>
<h1>Membuat Lingkaran Dengan CSS <br/> www.malasngoding.com</h1>
<br/>
<div class="lingkaran1"></div>
<br/>
<div class="lingkaran2"></div>
<br/>
<br/>
<br/>
<a href="https://www.siapngoding.my.id">www.siapngoding.my.id</a>
</body>
</html>Hasil lengkapnya
Akhir Kata
Oke sekian dulu tutorial Membuat Lingkaran Dengan CSS, semoga tutorial cara membuat lingkaran dengan CSS dengan mudah ini dapat bermanfaat.
Tutorial yang wajib di baca karena berhubungan dengan artikel ini.
- Membuat Menu Dropdown Sederhana Dengan CDSS
- Kumpulan Kode Warna Flat Design
Incoming search terms :
- gambar lingkaran
- cara membuat shape di html
- cara membuat lingkaran pada html
- coding css gambar bulat
- menggambar lingkaran di html
- membuat lingkaran dengan php
- membuat lingkaran dengan html
Join the conversation