Teman-teman sekalian saya kali ini mau berbagi trik mengenai membuat Lingkaran menggunakan CSS3 pada website... sehingga tidak usah membuat image terlebih dahulu untuk gambar lingkaran pada website teman-teman
CSS3 memang sangat cangih, melalui gabungan CSS3 + HTML5 kita sudah hampir bisa membuat sebuah website yang hampir mirip dengan website yang menggunakan JQuery + animasi dll.
memang HTML5 + CSS3 dibuat/dirancang untuk mengganti penggunaan Flash pada website konvensional.
pada dasarnya pembuatan lingkaran yang akan kita buat menggunakan CSS3 prinsipnya sama seperti membuat kotak pada umumnya...
Oke langsung saja
pertama teman2 buat terlebih dlu kode HTML yang akan di styling menggunakan CSS3
<div class="lingkaran">
</div>
kemudian tinggal tambahkan kode cssnya
<style>
.lingkaran{
width:200px; //lebar dari div yg akan di jadikan lingkaran
height:200px; //tinggi dari div
border:1px solid red; //garis border dari div sehingga lingkaran yg dibuat akan nampak
-moz-border-radius:50%; //styling border untuk mozzila browser
-webkit-border-radius:50%; //styling border untuk google chrome browser
-o-border-radius:50%; //styling border untuk oppera browser
border-radius:50%; //styling border utama sehingga menjadi lingkaran
}
</style>
Hasil nya akan berbentuk seperti ini :)
mudah bukan.. silahkan teman-teman coba saja langsung :)
Bingung Cari Website Poker Online yang terpercaya? coba DaunPoker lihat reviewnya disini
Daunpoker Poker dan Domino Online
Artikel keren lainnya:
Belum ada tanggapan untuk "Membuat Lingkaran menggunakan CSS3"
Post a Comment