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

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

josh hutapea2023-01-26, 13:10 pm
mau pesan aplikasi gimana caranya
tania2023-01-20, 09:53 am
kalo mau mesen aplikasi berbasis web bisa ga ka
Irfan 2023-01-16, 10:13 am
klo mau pesan aplikasi ke no wa mana
Jenny Sokoy 2023-01-11, 13:18 pm
cara membuat aplikasi absensi siswa
alvinno2022-12-27, 01:52 am
berpa aplikasi Program Aplikasi Pembayaran SPP Sekolah
Ronny2022-12-21, 17:34 pm
Jika saya butuh aplikasi CAT custom berapa ya?
reo2022-12-21, 09:46 am
berapa harga untuk apk rental mobil
anto2022-12-19, 11:48 am
aplikasi pos nya tidak bisa di download ya_ ? apa sekarang berbayar_ buat referensi tugas akhir
NDARU SUBEKT2022-12-19, 11:02 am
untuk simpeg 7_ 2 brp bos
Herawan2022-12-17, 06:24 am
Itu versi demo, utk versi non demo, ada pembayaran berapa?
afio2022-12-12, 15:55 pm
kak gimana cara download aplikasinya?
peres2022-12-09, 08:22 am
admin berapa harga aplikasi sipasnya_ ?
thomas2022-11-29, 08:07 am
brp aplikasi HRD
Repades Patr2022-11-26, 14:51 pm
aplikasi bisnis rental barang berapa ?
Ifan2022-11-19, 23:28 pm
Aplikasi pendataan pegawai harga berapa?
yunislisa2022-11-09, 10:42 am
Bisa nggak saya request aplikasi penyadap SMS? Dan biayanya berapa?
AZ2022-11-07, 16:06 pm
Halo utk aplikasi surat masuk keluar biaya nya berapa ya?
nursia2022-11-02, 15:42 pm
apakah aplikasi itu bisa di kostum sesuai kebutuhan, terimakasih, mohon info via email yaa
Nursia2022-11-02, 15:40 pm
apakah ada aplikasi tentang data pengembangan kompetensi _ diklat PNS? jika ada boleh infokan kepada saya
yosp2022-11-02, 05:35 am
saya ingin aplikasi bembayaran spp web
Irfan shobar2022-11-01, 20:20 pm
Ingin membuat KTP online
Riska koromo2022-10-20, 09:14 am
Ass Ka tutorial membuat aplikasi absen PKL berbasis web
Nst2022-10-15, 02:50 am
Bagaimana mengkoneksikannya dengan pelanggan?
Dennis2022-10-14, 22:40 pm
Saya tertarik dengan Program Rental Web Based, bagaimana untuk proses pembelianya?
Wan2022-10-07, 14:12 pm
Berapa harga aplikasi sisfo pasar
RANGGA2022-10-06, 14:10 pm
bang mau beli aplikasi pembuat KTP softcopy itu bang
Prathama2022-09-19, 15:48 pm
Aplikasi Koperasi Usaha Bisa
Andre2022-09-16, 23:31 pm
untuk aplikasi pengajuan judul skripsi berapa min
Basilio2022-09-15, 07:37 am
Pagi Bang ada aplikasi semua data siswa?
Bagus Andrem2022-09-11, 14:00 pm
Kl pembuatn aplikasi pos berbasi android berpa gan?
herry2022-09-01, 13:18 pm
saya di distribusi oksigen dgn sistem rental tabungnya_ saya butuh apk utk moinitoring tabung
Asri2022-08-27, 09:04 am
Brapa price tuk aplikasi manajemen database organisasi dan anggota 1 provinsi saja_ _
HERLI2022-08-25, 02:14 am
Untuk Harga SIPAS Brapa Bg ?
Usman Musa2022-08-24, 00:06 am
Mau tanya jika berapa biaya pembuatan Aplikasi Data Keanggotaan sebuah Organisasi atau Perguruan Silat
Bayu2022-08-20, 06:28 am
info harga aplikasi hrd berbasis web
Ferdyn Rede2022-08-07, 09:56 am
Bagaimana cara download link e_ ktp nya🙏🏻
Yuko Hermawa2022-08-05, 08:12 am
Boleh info harganya ? Ada fitur utk akses cloud gak ? Klo custom apakah bisa ?
efrin2022-07-15, 22:44 pm
Program Aplikasi Arsip Digital Berbasis Web mohon bertanya berapa harganya makasih
Toyo2022-07-13, 08:23 am
Brp harga Apk Inventory barang gudang
Leo2022-07-11, 18:37 pm
Halo selamat malam,, gmn cara beli aplikasi edit ktp ? Mksh
patrick2022-07-08, 21:35 pm
mau tanya bang kalo cara insert gambar pake query sql gimana ya
hery2022-07-08, 07:48 am
assalamu alaikum mau tanya mengenai pembuatan aplikasi untuk input data anggota SSB
siwimorin2022-07-05, 13:18 pm
mohon info aplikasi arsip surat tugas, lhp, dan B_ A_ S_ T untuk inspektorat
Rachmadi2022-06-29, 15:33 pm
mohon info harga aplikasi data anggota_ terima kasih

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat lingkaran dengan css