Adalah perkara mustahil untuk hasilkan lengkungan pada kotak tanpa menggunakan gambar. Jadi dalam proses untuk hasilkan kotak melengkung, kita akan gunakan gambar dan gabungkan dengan CSS. Ini adalah hasil yang akan kita buat di akhir tutorial ini.

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios
 

Bagaimana nak buat?

Kotak di atas sebenarnya adalah kotak biasa (berbucu petak) dengan warna latar belakang oren dan kita masukkan 4 gambar pada setiap bucu di atas petak tersebut supaya menutup bahagian bucu yang tajam. Ke semua gambar-gambar dibahagian bucu itu kita gunakan CSS. Jadi kita mulakan dengan coding ini:

<div class="bl">Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios</div>

Kita gunakan class="bl" untuk mewakili singkatan "bottom-left". Kenapa saya tidak gunakan singkatan dalam bahasa Melayu kerana perkataan "kanan" dan "kiri", kedua-duanya bermula dengan huruf "K". Seperti yang anda semua tahu, kita hanya boleh memperuntukkan satu latar belakang (background) pada satu elemen sahaja dan dalam kes ini adalah <div>. Jadi pertama sekali kita gunakan gambar ini:

Only local images are allowed.

kita namakannya, bl.gif. Kemudian kita akan masukkan gambar ini sebagai background untuk layer tadi dengan arahan CSS ini:

.bl { background: url(bl.gif) 0 100% no-repeat; width: 20em }

Arahan CSS ini dibahagikan kepada tiga seksyen iaitu: alamat gambar (url), kedudukan gambar dan arahan ulangan. Saya juga masukkan arahan "width" supaya kotak kita tidak membesar memenuhi skrin laman. Mari kita kaji satu per satu arahan yang saya masukkan itu.

  1. Alamat gambar (URL): Ingat bahawa arahan memanggil gambar ini adalah dilakukan menerusi dokumen CSS dan bukan melalui dokumen HTML, pastikan alamat adalah betul sekiranya anda menggunakan CSS luaran.
  2. Kedudukan gambar: Dalam contoh di atas saya menggunakan nilai 0 100% dalam arahan CSS. Angka yang pertama mewakili jarak dari KIRI sisi kotak <div> dan angka yang kedua mewakili jarak dari ATAS sisi kotak <div>. Contoh ini pula saya gunakan dalam nilaian % (terdapat nilaian yang lain seperti em dan px) kerana mahukan fungsi "fluid" terhasil pada kekotak tersebut.
  3. Arahan ulangan: Semestinya kita tidak mahu latar belakang tersebut diulang-ulang sehingga tiada rupa bentuk yang kita inginkan. Jadi kita masukkan nilai no-repeat. Jika hendak ulang secara mendatar, gunakan repeat-x manakala untuk mengulang secara menegak, gunakan repeat-y.

Setelah melakukan sedemikian, anda akan mendapat hasil yang pertama seperti ini:

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios

Lengkung "bottom-right" (br)

Seterusnya kita akan masukkan gambar lengkung pada bahagian bawah-kanan. Sebelum ini saya sudah nyatakan bahawa kita hanya boleh memperuntukkan satu latar belakang sahaja untuk setiap elemen <div> dalam CSS, jadi kita perlu hasilkan elemen <div> yang baru:

<div class="bl"><div class="br">Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios</div><div>

Namakan gambar kedua ini sebagai br.gif (Only local images are allowed.) dan masukkan arahan CSS yang baru:

.br {background: url(br.gif) 100% 100% no-repeat}

Arahan CSS ini adalah sama seperti yang sebelum ini tetapi apa yang kita ubah adalah pada bahagian kedudukan gambar tersebut yang mana kita masukkan 100% pada nilai kedudukan "left" yang sebelum ini adalah 0%. Sekarang kotak kita sudah kelihatan seperti ini:

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios

Lengkung atas, (tl) & (tr)

Untuk hasilkan dua lengkungan di bahagian atas, kita memerlukan dua gambar iaitu (Only local images are allowed.) dan (Only local images are allowed.) dan namakan kedua-dua gambar ini sebagai tl.gif dan tr.gif. Kemudian teruskan dengan memasukkan dua elemen <div> yang baru:

<div class="bl"><div class="br"><div class="tl"><div class="tr">Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios</div></div></div></div>

Dan jangan lupa masukkan juga arahan CSS yang baru:

.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat}

Cuba anda eksplotasikan sendiri kedudukan pada perubahan nilaian tersebut. Hasil yang akan kita dapat setakat ini adalah seperti ini:

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios

Warna latar belakang

Sekarang kita akan masukkan pula warna latar belakang berwarna oren kepada kotak tersebut supaya kesan kotak dengan bucu melengkung akan terhasil. Kod warna untuk latar belakang ini haruslah dimasukkan pada arahan CSS yang pertama. Ini kerana elemen yang pertama merupakan lapisan utama yang merangkumi ke semua lapisan-lapisan di dalamnya. Kedudukan lapisan yang lain iaitu br, tl dan tr secara tersendirinya akan menindih lapisan utama kita dan menutup kesan penjuru petak pada lapisan pertama.

Kod warna untuk latar belakang seharusnya sama dengan warna yang kita gunakan dalam menghasilkan bucu-bucu melengkung sebelum ini. Jika tidak hasilnya akan menampakkan ke empat-empat gambar yang berbucu melengkung itu seolah-olah tergantung pada kotak kita. Dalam contoh ini, saya gunakan kod warna (#efae59) untuk keempat-empat gambar tersebut.

Seterusnya tambahkan atribut baru dalam arahan CSS untuk lapisan yang pertama iaitu:

.bl { background: url(bl.gif) 0 100% no-repeat #efae59; width: 20em }

Hasil yang dapat anda lihat adalah seperti ini:

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios

Padding

Padding atau had kawasan perlu dimasukkan untuk mengelakkan teks kita bertindih dengan elemen-elemen gambar seperti yang anda lihat dalam contoh terakhir di atas. Oleh kerana saiz gambar yang saya gunakan adalah 10px lebar, 10px panjang. Jadi kita akan masukkan atribut "padding" dengan nilai 10px. Tetapi pada bahagian mana? Adakah pada elemen yang pertama seperti tadi? Jika anda masukkan pada elemen yang pertama, ke semua elemen (termasuk gambar pada 3 lapisan yang lain) akan turut sama dihadkan kawasannya seperti ini:

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios

Jadi untuk memperbaiki masalah ini, kita perlu masukkan elemen "padding" kepada elemen <div> yang terakhir, iaitu tr:

.tr { background: url(tr.gif) 100% 0 no-repeat; padding: 10px }
Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios

Isu Internet Explorer

Anda mungkin perasan yang elemen lapisan bawah dijalankan sebelum dua elemen bahagian atas. Sekiranya kita menjalankan atau memanggil elemen bahagian atas dahulu kemudian baru diikuti bahagian bawah, kita akan dapati sesetengah elemen gambar atas terkeluar dari kotak asal dan hasil yang tersangat pelek akan terhasil. Jika tidak percaya, anda boleh cuba sendiri.

Isu yang lain adalah berkaitan dengan Internet Explorer yang mana kadang-kadang elemen yang pertama yang mempunyai latar belakang berwarna menindih elemen-elemen didalamnya (gambar-gambar) menyebabkan hasil kotak tidak seperti di atas. Jadi untuk mengatasinya, kita perlu sedikit elemen kecil sebagai penanda bahawa elemen seterusnya tidak perlu ditindih. Masukkan arahan ini sejurus selepas penutup elemen </div> yang terakhir:

<div class="clear">&nbsp;</div>

Dan masukkan arahan dalam CSS:

.clear {font-size: 1px; height: 1px}

Terakhir

Koding atau aturcara HTML adalah seperti ini:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios
</div></div></div></div>
<div class="clear">&nbsp;</div>

Dan arahan CSS:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
Penilaian: 
3
Your rating: None Average: 3 (2 votes)

Komen

BuSHaK's picture

nice share.. tq bro

zailir's picture

mcamana nak gabungkan kod html dgn kod css tu? saya try buat di drupal tak dapat la..

parasolx's picture
Admin

cuba periksa Input filter yang digunakan. Cuba gunakan PHP Code kalu dalam content. tapi kalu dalam template, rasanya xde masalah. Mungkin tersalah masukkan kod CSS yang menyebabkan dia tak dapat kenal pasti ID DIV yang digunakan.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

kod dia masuk mcm ni je ke?

Ini merupakan kekotak dengan bucu melengkung. Kredit kepada Kripkorn Studios
 

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

parasolx's picture
Admin

tak la.. untuk CSS perlu diwrapkan ke dalam

sekiranya kita nak guna inline. tetapi kali kita dah ade fail CSS, just masukkan kod css tuh ke dalam fail CSS kita.

untuk inline CSS, kita perlu wrap code dia mcm ni:

<style>
.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
</style>

rasanya kalu buat mcm ni baru menjadi menda tuh.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

maksudnya kita masukan kod css tersebut dlm file "style.css" (kalau letak paling bawah sekali dlm fail "style.css" boleh ke atau kena letak di tempat yang tertentu?. Lagi satu kalau kita masuk dlm fail "style.css" - maka lain kali kalau kita buat kotak dia semuanya akan jadi berbucu secara otomatik la kan?.

p/s: yg inline tu saya cuba try dulu..tq

parasolx's picture
Admin

Yea betul.. Kita masukkan sekali sahaja.. Jadi semua kod html yang kita masukkan akan automatik jadi corner. Boleh letak kat mana-mana bahagian dalam fail style.css tuh. Atas ke bawah ke tak kisah. Sebab nnt browser akan baca keseluruhan fail tersebut.

Kalu boleh jangan gunakan inline. Selalunya inline kita hanya nak buat percubaan sahaja. Sebab inline css ni tak ikut format drupal.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

..sorry bro ganggu u lewat mlm ni

pasal inline dah jadi. ok, saya akan gunakan dlm file css kalau mcm tu..

tqvm

zailir's picture

ok, saya rasa dah faham.

cuma yg bahagian gambar tu...bagaimana kita nak buat 4 gambar bucu tersebut? adakah dengan membuat satu bulatan dahulu dan selepas itu kita 'cut' menjadi 4 gambar spt di atas dan savekan setiap gambar menjadi bl.gif, br.gif, tl.gif dan tr.gif.

satu lagi dari segi saiz gambar tersebut...adakah jika kita membuat saiz table yg berlainan, maka kita kena buat saiz gambar bucu yg berlainan jugak?

parasolx's picture
Admin

yup.. gambar bucu tuh kita boleh buat dengan dengan satu bulatan kemudian potong kepada 4. atau kalu nak boleh ambil gambar tuh terus.. tpi kena tukar warna dalam photoshop la..

pasal saiz tak perlu.. dia akan ikut kepada saiz yang kita tetapkan.. kalu kandunagn panjang, yang bucu tuh akan sendiri adjust dia berada di hujung bucu.. yang perlu kita ubah hanya CSS width dalam class .bl

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

ok..skrg aku nak acu cuba try..tk

Max Monic's picture

Rasanya untuk CSS3 dah tak perlu bantuan gambar untuk buat lengkung.
Tapi tak tau lah CSS3 ni compatible dengan IE lama ke tak.

parasolx's picture
Admin

kalu dengan CSS3 mmg tak perlu guna image. terus boleh buat dengan atribut border-radius. tapi masalah dengan ie lah sekarang. even ie9 pun still tak support css3. kena tunggu IE10 baru dikeluarkan yang standard dan compliance dengan semua browser.

mcmne pun, still tetap tak semua yang guna IE10. sebab sekarang pun masih ade yang guna IE6 about 5%. jadi kalu nak design kita exactly sama dalam semua browser, teknik tradisional ni masih membantu.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training