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

AYI SYAHFITR2023-09-25, 10:33 am
Assalamualaikum, maaf apakah aplikasi ini berbayar atau bisa di instal bebas?
yulli2023-09-24, 17:09 pm
saya mau bertanya utk aplikasi sppd,brp dijualnya,terimakasih
yulli2023-09-24, 17:00 pm
saya mau bertanya utk aplikasi sppd,brp donasinya,
DENIEL AFRIA2023-09-20, 15:01 pm
berapa unruk program_ aplikasi_ surat_ masuk_ dan_ surat_ keluar
untuk harga 2023-09-20, 07:20 am
untuk harga aplikasi sipas brp min
Slamet2023-09-19, 10:05 am
untuk program aplikasi pendataan umkm, kalau boleh tahu dijual berapa?_ terima kasiih
Pria2023-09-14, 14:37 pm
untuk donasi menggunakan aplikasi ini berapa gan
Amot2023-09-09, 08:46 am
apakah framework nya php kak? berapa minimal donasi kak agar dpt password nya?
besse2023-08-25, 13:56 pm
minta kontak wa
rizal2023-08-24, 06:09 am
untuk harga aplikasi sipas brp min
Muji2023-08-20, 22:51 pm
Saya dan temen_ temen seorganisasi tertarik dengan Program Aplikasi Input Data Anggota, berapakah harga aplikasi tersebut
Auriga Danur2023-08-14, 11:32 am
File koneksi_ php nya kok gak ada ya?
Miftah2023-08-09, 16:36 pm
Apakah bisa develope aplikasi sistem management atlet, khususnya cabang olahraga atletik, data atlet, result event, dll
sutrisno2023-08-09, 11:45 am
bos haraga aplikasi surat berapa
Fahrul,S.Kom2023-08-07, 15:34 pm
saya tertarik dengan aplikasi SIPAS V2_ 0
ratna2023-07-30, 09:44 am
Mas aplikasi Sppd harganya berapa njih
Cien2023-07-25, 08:33 am
Buat biodata diri pakai tipe data boolean di php bagaimana min?
Viqi2023-07-20, 11:40 am
Untuk mendapatkan Aplikasi sarpras V4, Bayar berapa min?
Bimo Cakti T2023-07-13, 13:54 pm
aplikasi cuti online pegawai berapa min? mohon info
Dwi P2023-07-11, 21:45 pm
Mohon maaf mau menanyatakn aplikasi SIMPEG kira_ kira berapa harganya? Bisa dilist kan untuk semua SIMPEG
Duta2023-07-10, 18:38 pm
Saya ingin beli aplikasi Sipas V2_ 0
Alex2023-07-10, 11:38 am
Halo gan saya mau nanya2 dulu ya_ aplikasi perjalanan dinas SPD v2 itu bisa kita dapat source codenya donasi berap yah_ _
FIYO FAHREZI2023-07-09, 21:25 pm
Mas saya mau beli aplikasi KTP
sila susila2023-07-09, 17:06 pm
aplikasi pembayaran SPP sekolah donasi berapa klo untuk skripsi?
aa2023-07-06, 21:43 pm
net simpeg brp min?
aditya2023-06-22, 13:12 pm
berapa harga untuk aplikasi inventory? bagaimana transaksinya?
michael 2023-06-20, 23:06 pm
saya mau tanya kalo penamabahan harga untuk jumlah keseluruhan nya tu bgimana ya? terima kasih
Muhadi2023-06-20, 12:14 pm
Software aplikasi pembayaran SPP sekolah bisa diakses pakai HP tidak?
Fadly2023-06-18, 20:41 pm
Source code aplikasi arsip digital di jual harga berapa min? minat SC nya saja
Marisca2023-06-13, 08:16 am
Saya sedang diklat PIM IV, rencana akan memakai aplikasi kepegawaian simpeg untuk proyek perubahan, bisa dibantu?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat lingkaran dengan css