membuat lingkaran dengan css

share

membuat lingkaran dengan css membuat lingkaran dengan css membuat lingkaran dengan css membuat lingkaran dengan css membuat lingkaran dengan css
  • membuat lingkaran dengan css

    Cara Membuat Lingkaran dengan CSS


    Tutorial cara membuat lingkaran dengan css menggunakan property border-radius sehingga memungkinkan area sisi sudut dari sebuah elemen menjadi lengkung atau round dengan HTML dan CSS3.
  • membuat lingkaran dengan css
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat lingkaran dengan css
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat lingkaran dengan css Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat lingkaran dengan css
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Lingkaran dengan CSS

Pada kesempatan ini kami akan membahas tutorial cara membuat lingkaran dengan css menggunakan property border-radius sehingga memungkinkan area sisi sudut dari sebuah elemen menjadi lengkung atau round. Pada dasarnya element HTML sebuah bidang adalah terdiri dari property "width" dan "height" atau lebar dan tinggi sehingga akan membentuk bangun segi empat. Jika lebar dan tinggi memiliki value yang sama, ini akan membentuk sebuah bidang persegi dengan panjang semua sisi yang sama, dan akan menjadi sebuah lingkaran jika setiap sudut dibuat menjadi radius lengkungan senilai 100% dengan CSS. Seperti inilah teori dasar membuat lingkaran pada element HTML dengan style CSS, secara teori memang cukup mudah namun tetap menjadi wajib untuk dipelajari.

Tutorial cara membuat lingkaran dengan css ini masih sangat dasar dan sederhana, namun dari pemahaman inilah nantinya teman-teman dapat mengembangkannya menjadi lebih menarik dan full power style. Jika ada yang belum mengerti tentang pengertian CSS dapat teman-taman pelajari di artikel berikut ini apa itu css silahkan dibaca.

Berikut langkah - langkah tutorial cara membuat lingkaran dengan css menggunakan element HTML dan CSS3 lengkap beserta source code style css dan penjelasannya.

  • Membuat homepage dengan HTML
  • Membuat embedded style CSS untuk membentuk lingkaran.

Cara Membuat Lingkaran dengan CSS



Lingkaran CSS

membuat lingkaran dengan css

1. Membuat Homepage dengan HTML

Homepage adalah sebuah halaman index yang buat menggunakan kode HTML murni tanpa sentuhan CSS sedikitpun terlebih dulu sebagai pendahuluan. Meskipun nantinya kode css akan kita buat pada halaman HTML ini, hal ini dilakukan agar belajar css menjadi lebih mudah dipahami secara struktur dasarnya. Untuk membuat homepage tersebut yang sekaligus digunakan sebagai halaman index tutorial cara membuat lingkaran dengan css ini, silahakan tulis kode HTML berikut kemudian simpan pada folder tutorial.

Simpan sebagai index.html

<html>
	<head>
        <title>Membuat Lingkaran dengan HTML dan CSS</title>
	</head>
	<body>
        <h2>Membuat Lingkaran Dengan CSS</h2>
		<br />
		<div class="lingkaran"></div>
	</body>
</html>

Perhatikan baris kode ke-8 pada kode html di atas yaitu <div class="lingkaran"></div>, ini adalah element HTML dengan tag <div>...</div>. Untuk membuat lingkaran, diperlukan id atau class di dalam tag tersebut, dalam contoh ini adalah menggunakan class "lingkaran". Sehingga style CSS dengan "selector" class lingkaran akan terrepresentasikan pada setiap tag HTML dengan nama class yang sama, yaitu lingkaran.

2. Membuat Embedded Style CSS untuk Membentuk Lingkaran

Untuk membuat lingkaran di dalam css selector sangatlah mudah dan sederhana, hanya memerlukan beberapa property saja, silahkan ketik kode CSS di bawah ini. Letakan kode css tersebut pada file yang sama "embedded" pada file index.html di antara tag <head>...</head>.

<style type="text/css">
	.lingkaran{
		width: 160px;
		height: 160px;
		background: #FFA347;
		border-radius: 100%;
	}
</style>

Perhatikan kode di atas, adalah sebuah style CSS dimana selector .lingkaran di deklarasikan oleh {...} simbol kurung kurawal buka dan tutup, dengan beberapa properties dan value. Property width, height, background, dan border-radius harus memiliki value sebagaimana ditulis, jika value berbeda maka tidak akan menghasilkan lingkaran, misal jika width, dan height berbeda ini akan membentuk bidang oval. Atau jika misalnya property border-radius hanya memiliki value 50%, maka tidak akan membentuk lingakaran, hanya saja setiap sudat bidang akan menjadi lengkungan.

Dengan membuat kode css embedded di atas maka turorial cara membuat lingkaran dengan css ini sudah dapat dijalankan dan akan menampilkan sebuah lingkaran dengan warna mirip "orange". Jika akan membuat beberapa lingkaran atau bentuk bidang lengkung lainnya, cukup tambahkan nama class selector di dalam kode html dan css. Sebagaimana kode lengkap html dan css untuk membuat lingkaran di bawah ini, silahkan ketik pada teks editor, kemudian save dan jalankan pada web browser.

<html>
	<head>
        <title>Membuat Lingkaran dengan HTML dan CSS</title>
		<style type="text/css">
		.lingkaran{
			width: 140px;
			height: 140px;
			background: #FFA347;
			border-radius: 100%;
		}
		.lingkaran1{
			width: 90px;
			height: 90px;
			background: #E5E5E5;
			border-radius: 100%;
		}
		.oval{
			width: 80px;
			height: 120px;
			background: #000;
			border-radius: 100%;
		}
		</style>
	</head>
	<body style="width:40%;">
        <h2>Membuat Lingkaran Dengan CSS</h2>
		<center><div class="lingkaran"></div></center>
		<center><div class="lingkaran1"></div></center>
		<center><div class="oval"></div></center>
	</body>
</html>

Jika kode html dan css untuk membuat lingkaran di atas dijalankan maka akan membentuk beberapa bidang lengkungan seperti lingkaran dan oval, sebagaimana gambar di bawah ini.

membuat lingkaran dengan css

Inti dari tutorial cara membuat lingkaran dengan css dan bidang lengkung lain ada pada komponen css yang mengatur agar setiap sudut menjadi lengkungan adalah pada baris kode berikut ini.

border-radius: 100%;

Tutorial Cara Membuat Lingkaran dengan CSS

Sekian penjelasan sederhana dari kami tentang bagaimana cara membuat lingkaran dengan css menggunakan HTML dan CSS3 class selector sehingga setiap sisi sudut bidang memiliki border radius lengkung atau round. Untuk mendapatkan source code nya Anda dapat langsung saja copas dari sumber kode di atas, jika tidak dapat dicopas atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Cara Membuat Lingkaran dengan CSS

Tags: cara membuat lingkaran html, membuat lingkaran css, lingkaran css, membuat lingkaran html dan css, membuat lingkaran dengan css


Reliable

membuat lingkaran dengan css

Advertise

jasa pasang iklan murah

Archive

Payment & Donation

membuat lingkaran dengan css

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat lingkaran dengan css

Account :

andihatmoko@gmail.com

Live Chat

ChesterInigO2022-01-23, 12:33 pm
I am am excited too with this question_
Deni2022-01-20, 11:31 am
Cara Downloadnya gimana?
Indra Setiaw2022-01-11, 15:19 pm
bagaimana caranya saya bisa memperoleh aplikasi SPPD
syahrul2022-01-07, 14:54 pm
ini cara pasangnya harus didalam website atau bisa berdiri sendiri bang?
usin2021-12-17, 23:44 pm
bang form edit datepicker dong
apri2021-12-13, 12:47 pm
mas minta aplikasi penomoran surat otomatis dong_
OSMAN ARISAN2021-12-07, 09:43 am
ok banget
Khoirul2021-11-29, 14:48 pm
Mau tanya unutk Aplikasi SPPD brpa harga?
azob2021-11-25, 09:27 am
Aplikasi E_ dokumen apakah bisa custome?
ahya2021-11-17, 20:02 pm
harga aplikasi arsip surat brp??? bs bntu instal ga?
M. Taufik2021-11-17, 11:44 am
Saya tertarik dengan aplikasi data mahasiswa, tapi apakah bisa data mahasiswa nya dapat diisi sendiri?
man2021-11-11, 08:08 am
App cuti bisakah di+ fitur laporan rekap per cuti per pegawai dan rekap tahun lalu_ Utk tentukan bisa tidak dpt cuti lg
project2021-11-01, 12:14 pm
mba irene masi cari aplikasi arsip surat ?
Ari2021-10-31, 12:24 pm
saya tertarik aplikasi input data anggota_ boleh minta no hp yang bia saya hubungi? terimaksih
Ketut Wiyasa2021-10-22, 09:58 am
Biaya pembuatan aplikasi marketplace berbasis web
Budi H2021-10-06, 11:12 am
Saya tertarik dengan disain Sistem informasi Manajemen data anggota, bisa di custom untuk data UMKM?
Irene2021-10-05, 14:50 pm
Hai, saya tertarik dengan aplikasi arsip surat masuk dan keluar_ _ Berapa ya kira kira rincian biayanya?
adi2021-10-03, 17:16 pm
terima kasih tutorialnya sangat membantu
Abi2021-10-02, 01:48 am
hai saya tertarik dengan Program Aplikasi Input Data Anggota, ada telp yang bisa di hubungi ?
saya ertin2021-09-28, 15:07 pm
apakah saya bisa hosting yang data siswa
Indra2021-09-20, 14:39 pm
selamat siang, sy mau coba utk bikin startup peminjaman barang, apakah bisa di setup lokal server ?harga brp?ada limiter
Dimas Nurcah2021-09-16, 11:38 am
cara menampilkan ip versi 6 nya itu gimana min? saya coba scriptnya malah _ _ 1 _ Mohon sekali bantuannya min
dedi2021-09-11, 13:06 pm
sandi login untuk aplikasi absensi mas apa ya
Budi2021-09-09, 15:49 pm
Maaf ingin bertanya, harga untuk aplikasi sarpras dan simpeg berapa ya masing_ masingnya
SURATNO2021-09-03, 13:47 pm
saya ingin bikin aplikasi data rt rw apakah bisa di bantu
BUKHORI2021-08-23, 00:36 am
mohon info harga aplikasi input data anggota?
Bagas2021-08-12, 14:04 pm
Bagaimana saya bisa mendownload aplikasi E_ Skripsi
Bambang2021-07-29, 14:18 pm
Bisa di ganti namanya tidak ya mis Gudang backup arsip sat
Nirwan2021-07-29, 10:23 am
Program Aplikasi HRD Berbasis Web, berapa bos
Ghossani2021-07-23, 15:26 pm
Info harga Aplikasi Manajemen Anggota
Hanafi2021-07-22, 00:50 am
untuk website sekolah berapa
Bambang W 2021-06-30, 10:31 am
Untuk aplikasi stock barang, bisakah ada tambahan fitur multi gudang, dan kira kira berapakah harganya?
Warta2021-06-18, 00:24 am
Untuk biaya pembuatan aplikasi berbasis web untuk arsip berapa yah fee nya ?
parlin2021-06-11, 14:42 pm
berapa harga dan bisa gk di ganti menu sesui dengan kebutuhan untuk aplikasi data pegawai
Retno2021-06-04, 15:13 pm
utk aplikasi arsip dokumen kantor, harganya brp ya pak?
Ezi Fitriana2021-05-26, 21:42 pm
mohon info biaya buat aplikasi sistem informasi dan pelayanan online buat Kantor Desa
Sayuti2021-05-25, 15:06 pm
Mau tanya klo Biaya buat Aplikasi Penilaian Kinerja Atau SKP brp ya?
Rachma2021-05-08, 19:26 pm
Untuk program aplikasi arsip dokumen biayanya berapa ya? dan apakah ada pembatasan maksimal berapa kb per dokumen?
irvan2021-04-14, 11:00 am
saya ingin membeIi untuk instansi pemerintah saya, bagaimana pembeIiannya ya

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat lingkaran dengan css