Solution ! create boxes with rounded corners using css & javascript

cafe para pecinta komputer

Home » Internet, Programmings, Tips & Tricks

Solution ! create boxes with rounded corners using css & javascript

Author : Izul Cyber Cafe 23 May 2009 2,467 views 4 Comments

rounded Rasanya sudah lama sekali tidak posting, lama sekali tidak mengklik menu Add New Post di Dashboard cafe ini.

Untung sebelumnya dibantu teman untuk menulis artikel, membuat cafe ini tetap eksis. Oke sekarang lanjut ke topik lagi.

Wow judulnya sih pake bahasa inggris, tapi santai, isinya masih pake bahasa Indonesia kok .

Kali ini saya kembali dengan sebuah tulisan ringan tapi cukup mengasikkan untuk dicoba, terutama untuk para pemula web desain. Yaitu membuat Kotak yang disudutnya dibulatkan.

Saya akan mencoba membuatnya dengan 2 macam cara (CSS dan Javascript).

Cara-1 : Dengan CSS

Buka Web editor kesukaan kamu, bisa Dreamweaver, Notepad, atau yang lain.

Tuliskan kode HTML berikut.

——————————————-

<html>
<head>
<title>Tutorial CSS</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="cekung">
	<p>Membuat Kotak yang disudutnya di buat cekung dengan CSS</p>
</div>
</body>
</html>

——————————————

Lalu buat file CSS dengan nama style.css dan isinya adalah seperti ini.
————————–

.cekung{
	-moz-border-radius:25px;
	width:250;
	padding:1em;
	background-color:#f20000;
	color:#fff;
}

————————–

Sekarang jalan kan browser anda :

Demo 1

Note : Hanya bisa di Mozilla Firefox.

Cara 2 : Dengan Javascript

Berikutnya menggunakan Javascript, tapi kamu harus mendownload terebih dahulu file javascipt nya.

File tersebut bernama NiftyCube. Silahkan download disini.

Cara menggunakan nya cukup mudah, anda tinggal memanggil file javascriptnya dengan menempatkan script berikut di antara tag <head> dan </head>.

———————————————–

<head>
<title>Tutorial CSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="corners3.css" />
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
	window.onload=function(){
	Nifty("div.cekung");
}
</script>
</head>

———————————————–

Dan memanggil class nya dengan <div class=nama_kelas></div>

Berikut contoh kodenya selengkapnya.

——————————————–

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Tutorial CSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="corners3.css" />
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
	window.onload=function(){
	Nifty("div.cekung");
}
</script>
</head>
<body>
	<div class="cekung">
		<p>Tutorial membuat sudut melengkung dengan CSS Dan Javascript</p>
	</div>
</body>
</html>
</html>