Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS.
Memang mungkin terdengar sederhana, tapi pada tutorial CSS ini akan lebih menjelaskan pemahaman fungsi atau syntax CSS yang bisa kita manfaatkan untuk membuat lengkungan pada sudut element HTML.
Sehingga bisa membentuk lingkaran dengan menetapkan lengkungan penuh pada setiap sudut element HTML.
Di sarankan untuk teman-teman yang belum membaca tutorial dasar CSS di malasngoding.com agar membaca nya terlebih dulu. agar tutorial atau materi yang di sampaikan nyambung dan bisa di pahami dengan cepat.
Untuk membuat lingkaran dengan menggunakan CSS, caranya sangat mudah. silahkan teman-teman simak penjelasan berikut.
Membuat Lingkaran Dengan CSS
Kita akan langsung masuk ke contoh. di tutorial membuat lingkaran atau bulat dengan CSS ini, silahkan perhatikan syntax HTML dan CSS berikut.
Untuk membuat lingkaran, pertama kita akan membuat element <div>..</div>. serta memberikan class atau id pada element <div> tersebut. di sini saya membuat class ‘lingkaran1’ pada element <div>.
HTML
1
<div class="lingkaran1"></div>
CSS
1
2
3
4
5
6
.lingkaran1{
width: 200px;
height: 200px;
background: #dac52c;
border-radius: 100%;
}
Maka hasilnya akan menjadi seperti berikut.
Membuat Lingkaran Dengan CSS
Inti dari pembuatan lingkaran dengan CSS ada pada syntax border-radius. border-radius adalah perintah untuk mengatur radius lengkungan pada sebuah element HTML. pada syntax di atas kita memberi nilainya dengan 100%. sehingga lengkungan yang di hasilkan penuh (sehingga berbentuk bulat).
Coba ubah nilai nya menjadi 30%, atau terserah teman-teman. untuk melihat hasilnya. berikut hasil tampilan bentuk lingkaran yang jika nilai border-radius nya kita ganti dengan 30%.
membuat lengkungan dengan css
untuk mengubah ukuran lingkarannya teman-teman bisa langsung mengubah nilai ukuran height dan width nya.
1
2
width: 200px;
height: 200px;
Coding CSS Membuat Lingkaran
Berikut adalah full source code nya.
FULL SOURCE CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<title>Membuat Lingkaran Dengan CSS - www.malasngoding.com</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="//www.malasngoding.com">www.malasngoding.com</a>
</body>
</html>
Hasil lengkapnya.
html css lingkaran
Oke sekian dulu tutorial Membuat Lingkaran Dengan CSS. semoga tutorial cara membuat lingkaran dengan mudah ini dapat bermanfaat. untuk demo dan link download source code nya bisa teman-teman lihat pada link di bawah.
DEMO
Tutorial yang wajib di baca karena berhubungan dengan tutorial ini.
- Membuat Menu Dropdown Sederhana Dengan CSS
- Kumpulan Kode Warna Flat Design
Incoming search terms:
- gambar lingkaran
- //www malasngoding com/membuat-lingkaran-dengan-css/
- cara membuat shape di html
- cara membuat lingkaran pada html
- menggambar lingkaran di html
- coding css gambar bulat
- membuat lingkaran dengan php
- membuat lingkaran dengan css
- Belajar css di males ngoding
- cara membuat tombol panah atau lingkaran pada wrb css
- SHARE :
Diki Alfarabi Hadi
Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
- Author's profile
- All posts by Diki Alfarabi Hadi
Tags: buatlah circle text menggunakan css pada html, cara membuat gambar lingkaran di html, cara membuat gambar menjadi bulat di html, cara membuat lingkaran pada html, cara membuat shape di css, cara membuat shape di html, coding css sederhana, coding html, css bulat, css lengkungan, css lingkaran, membuat balon dengan css, membuat border lingkaran di css, membuat bulat dengan css, membuat css, membuat gambar lingkaran di html
Tutorial CSS Dasar
- #1. Pengenalan CSS
- #2. Penulisan CSS
- #3. Background CSS
- #4. Margin dan Padding CSS
- #5. Font CSS
- #6. Link / Hyperlink CSS
- #7. Format Text CSS
- #8. Position CSS
- #9. Border CSS
- #10. List CSS
- #11. Float CSS
- #12. Tutorial CSS Lainnya
Tutorial CSS3 Dasar
- #1. Pengenalan CSS3
- #2. Rounded Corner CSS3
- #3. Warna Gradient CSS3
- #4. Efek Bayangan CSS3
- #5. Transform CSS3
- #6. Transition CSS3
- #7. Animasi CSS3
- #8. Tutorial CSS3 Lainnya
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi HadiMembuat Bentuk Segitiga Dengan CSS
7 July 2020
Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ... Diki Alfarabi HadiMembuat Template Web Responsive Dengan HTML dan CSS
10 May 2017
Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Diki Alfarabi HadiCara Membuat Text Di Tengah Dengan HTML dan CSS
2 May 2017
Selamat datang kembali di www.malasngoding.com. situs yang fokus membahas tentang tutorial pemograman web, mobile dan desktop. Sesuai dengan judul “Cara Disable Resize Form Textarea Dengan ...Cara Disable Resize Form Textarea Dengan CSS
31 March 2017