Dalam artikel tutorial sebelumnya pernah kita singgung dan buat tutorial mengenai
membuat lingkaran namun dengan java. Kali ini tidak menggunakan bahasa pemograman itu melainkan menggunakan
Cascading Style Sheets (CSS) 3.
Untuk membuat lingkaran cukup dengan memanfaatkan tag border-radius yang sudah ada dalam
CSS 3. Cukup sederhana, berikut contohnya yang sudah diberi tambahan tag lain agar lebih menarik dari segi background, font, serta lainnya.
<style>
.style-lingkaran{
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background:#00C4FD;
width: 150px;
height: 150px;
font-size: 20px;
font-weight: bold;
color: #fff;
line-height: 130px;
text-align: center;
/*Thewarasi*/
}
</style>
<div class="style-lingkaran">
coba
</div>
Kurang lebih hasilnya seperti gambar di bawah ini :
Atau lihat demonya secara langsung :
test
Yang terpenting prinsip dasarnya masih menggunakan border-radius untuk memanipulasi gambar lingkaran yang akan terbentuk.
Selamat mencoba..
Blogger
Google+
Facebook
Twitter