Laman

22 Agustus 2010

membuat sudut melengkung

Ok karena kebetulan kemarin ada yang nanyain terinpirasi deh jadinya buat mosting cara membuat sudut melengkung (begitu temen saya menyebutnya), sekarang saya akan menjelaskan cara membuat sudut melengkung di blog kita seperti yang ada di blog ini.  tapi cara ini memiliki kekurangan yaitu pada browser tertentu tidak akan berfungsi contohnya saja pada google chrom.

Ok buat temen temen yang mau nyoba ne aku kasi caranya.
cara yang akan kita gunakan adalah menambahkan kode berikut pada CSS blog kita.
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;

misalnya kamu akan membuat sudut headermu menjadi lengkung kamu tinggal mencari CSS headermu, contohnya seperti di bawah ini.
#header-wrapper {
background:#000;
width:648px;
height:150px;
float: left;
margin:0 auto 0px;
}

kemudian kamu tambahkan kode tadi sehinga CSS headermu menjadi seperti berikut:
#header-wrapper {
background:#000;
width:648px;
height:150px;
float: left;
margin:0 auto 0px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

Note :
-moz-border-radius-topleft:15px;            ========> sudut kiri atas
-moz-border-radius-topright:15px;         ========> sudut kanan atas
-moz-border-radius-bottomleft:15px;      ========>  sudut bawah kiri
-moz-border-radius-bottomright:15px;   ========> susut bawah kanan

jika kamu ingin merubah besar lengkungan kamu bisa merubah nilainya...
setelah itu kamu save dan lihat hasilnya,,,

4 komentar:

  1. makasih banyak sob, nyobak malu ne hahahah

    BalasHapus
  2. bisa d kasih contoh postingnya juga gag?
    byar tau mksud posting u tu buat apa?

    BalasHapus
  3. sip sudah aku coba, dan berhasil, thanks

    BalasHapus
  4. af, bisa dijelasin lbh rinci tak? css itu apa? kita aplikasikan kode tadi dimana?, maklum, saya msh tahap belajar. tq ya

    BalasHapus