CSS Tricks: Curvy Box

Buatnya ternyata gampang. Tambahkan saja 2 baris berikut ini di id atau class yang akan dijadikan kotak.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

contoh:

.kotak {
	background: #FFFFFF;
        float: left;
	width: 380px;
	margin: 0px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #FBD7FB;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}

Terus tinggal pasang aja seperti ini:

<div class="kotak">
  It is a long established fact that a reader will be distracted by the
  readable content of a page when looking at its layout. The point of  using Lorem Ipsum
  is that it has a more-or-less normal distribution of  letters, as opposed to using
  'Content here, content here', making it  look like readable English. Many desktop publishing
  packages and web  page editors now use Lorem Ipsum as their default model text,
  and a  search for 'lorem ipsum' will uncover many web sites still in their  infancy.
  Various versions have evolved over the years, sometimes by  accident,
  sometimes on purpose (injected humour and the like).
</div>

Ga cuma untuk bikin kotak curvy aja, tapi bikin navigasi atau menu hover juga bisa loh. Biar pas di hover jadi lebih melengkung dan lucu.

Curvy Box CSS

Lucu kan jadi ada lekukan di sudut-sudutnya

Ok gitu ajah nanti pasti kotaknya jadi agak sedikit curvy (melengkung), tapi di Internet Explorer 6 nggak bisa. Who cares, it’s a shitty browser anyway.

3 thoughts on “CSS Tricks: Curvy Box

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s