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

46qzkxqnpKEbTixTHqjqbq
46
AnonymousqzkxqmxnQKnMkdBqjqbq
46qzkxqliHceumNzTcUwMP
46
AnonymousqzkxqKExUmubohqkFvVc
AnonymousqzkxqKalKeKDftbmXjPb
46qzkxqJMmMXMAaNXqjqbq
46
AnonymousqzkxqJcTbnIsoPYqjqbq
46qzkxqdvDsDnZWmWyXpvt
46
AnonymousqvkkqXiMoiGuAdZczAgo
AnonymousqvkkqwkVMbtdcJoqxbbq
AnonymousqvkkqVramfzdvmRqxbbq
AnonymousqvkkqVJCKpwdKabqxbbq
AnonymousqvkkqvfLqSJsFWcRHIle
AnonymousqvkkqUwnpLYNwIuqxbbq
58qvkkqTUyyEtMeoxqxbbq
58
58qvkkqrWvTEqsFegqxbbq
58
58qvkkqPfgycZSjFMAeaIi
58
AnonymousqvkkqOVvvBOfnvjgwbRU
AnonymousqvkkqNGUcbXuctiZTjUf
58qvkkqicbGZwtVFcZtiXp
58
AnonymousqvkbqzGfpjLYTWyqbqkq
34qvkbqyHljUNvLTlMOrGe
34
34qvkbqXYCOLJwJStqbqkq
34
34qvkbqXrRTMjVrZvqbqkq
34
AnonymousqvkbqulhATHOjSapSDTj
34qvkbqUkHApnopiNqbqkq
34
AnonymousqvkbqUaFezQOzReqbqkq
34qvkbqthasmxaLXCXTflJ
34
AnonymousqvkbqSdsTeQdaTiqIqMW
34qvkbqrZwFjzNQpEqbqkq
34
AnonymousqvkbqRHDVwJvxLBEDcot
34qvkbqRFWsyljSoYIDUZz
34
AnonymousqvkbqpuAHCiuNaEpZeOt
AnonymousqvkbqOgPzdmTEwrIBLUF
AnonymousqvkbqnSLxzPjwYDqbqkq
AnonymousqvkbqMxQnLzSlNNqbqkq
AnonymousqvkbqMQLHEXXbPgzRojn
34qvkbqKLvAWOsglRqbqkq
34
34qvkbqkigYOrljfVZeKDT
34
AnonymousqvkbqIvMVNMWiltqbqkq
34qvkbqiORdmYEwuhqbqkq
34
34qvkbqfOTakzsnpoeFISe
34
AnonymousqvkbqFKogxZbymuqbqkq
34qvkbqEXmTRccaelPdkdR
34
34qvkbqczBernprcBznclM
34
34qvkbqBuJWPbAtNXIaUHR
34
34qvkbqBBnYjjeODpqbqkq
34
34qvkbqAZGzqkCtSBqbqkq
34
AnonymousqqvqqzMIbsDHZMQEHUpT
AnonymousqqvqqWuwilHbBXOqxzzq
AnonymousqqvqqsXKKYxjgsRruOYp
71qqvqqQvGHZNpXNnqxzzq
71
AnonymousqqvqqPlFVvqrfFRwSBPL
71qqvqqPhftzlrpBzqxzzq
71
71qqvqqpeuXiBfBNUQgiBm
71
AnonymousqqvqqnPmHqoKIHSUNZGW
71qqvqqNjlAjsdjGuqxzzq
71
71qqvqqHEZtdyMlmMXflqK
71
AnonymousqqvqqGUgZbdGkhIqxzzq
71qqvqqgeIXKOVKPDCsJVP
71
AnonymousqqvqqgCAZHAQXOXqxzzq
71qqvqqepErNQfrXxqxzzq
71
AnonymousqqvqqCXTSRxhEijqxzzq
71qqvqqAdqCFqWpjATdvrh
71
AnonymousqpvqqwJzhAKjnkllCxtB
75qpvqquUNRIcOqdFcYspc
75
75qpvqqTRpVKvpGwSzIruW
75
75qpvqqrmDMiRMdKmqbqxq
75
75qpvqqOXibdItvLUqbqxq
75
AnonymousqpvqqnxfaCQvdhGCTIGe
75qpvqqMfflkQNGpLpokqi
75
AnonymousqpvqqKeEVwhECBJqbqxq
75qpvqqhoVHlWBndXqbqxq
75
75qpvqqFfJUdZfHlgqbqxq
75
75qpvqqaUoREDDNgDzbGlE
75
AnonymousqpvqqAtkTRIbXxdqbqxq
AnonymousqkpvqyRgcoYoToTJRnbL
99qkpvqXOOBVkLvULYifqt
99
AnonymousqkpvqnPbiuPMdZwqqqjq
AnonymousqkpvqiLKUrrbjJbqqqjq
AnonymousqkpvqiatKLWNmoCUJZCr
99qkpvqgVvfDMDFndqqqjq
99
99qkpvqdGgVuoqZhYqqqjq
99
99qkpvqCvCeANhuStUDggk
99
86qjbqqXlHiCzMdwxFGsog
86
AnonymousqjbqqVHGcoapVOsqbvkq
AnonymousqjbqqoVpbPJhilsxIIPe
AnonymousqjbqqmTfyOqJIfqqbvkq
86qjbqqMLRiXimVPLqbvkq
86
AnonymousqjbqqMFeZnLFsKYbSXEg
AnonymousqjbqqMCCKYghISPqbvkq
86qjbqqIFfADBWZPbkpRaM
86
AnonymousqjbqqhgWznQVbPoZTLFS
86qjbqqFZYsXaPUFzqbvkq
86
AnonymousqjbqqavXpnObHktqbvkq
AnonymousqjbqqAETfYtxuZutiUPt
AnonymousqbpkqzIDsmuZbxrrjUju
AnonymousqbpkqyUzlrsqHxtKAFGJ
88qbpkqXAcnHDjOCtkDcEp
88

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat lingkaran dengan css