Kotak Bucu Melengkung Dengan CSS

Sampel: CSS
Dikarang oleh parasolx pada Isn, 02/03/2009 - 7:20pm
Dikemas kini pada: 07/01/2010 06:24:13
Tag:

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:

Artikel atau tutorial di atas hanya dipaparkan sebahagian sahaja.
Untuk melihat dan membaca kandungan selanjutnya, sila log masuk ATAU mendaftarkan diri sebagai ahli.
BuSHaK's picture
#1: nice share.. tq bro
Ditulis oleh BuSHaK pada Kha, 16/04/2009 - 12:43pm

nice share.. tq bro

Hantar komen baru

 
CAPTCHA
Soalan ini dipaparkan bagi mengesahkan anda BUKAN SPAM BOT.
3 + 0 =

Selesaikan permasalahan matematik mudah ini dan masukkan hanya jawapannya sahaja. Contoh: untuk 1+3, masukkan 4.

Artikel Berkaitan

  • Kotak Sempadan Bucu Lengkung CSS
    .bl {background: url(http://www.kripkornstudios.com.my/images/bl2.gif) 0 100% no-repeat; width: 20em} .br {background: url(Menguji Antivirus Anda
    Berikut adalah cara untuk menguji sama ada antivirus anda berkesan atau tidak. salin dan simpan coding dibawah sebagai virus.exe dan scan file tersebut dengan antivirus anda. X5O!P%@AP[4\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H* Jika Antivirus anda gagal mengesan fail ini, bermakna an ...
  • Latar Belakang
    Membuat warna bagi latar belakang <html> <head> <style type="text/css">   body { background-color: yellow }   h1 { background-color: #00ff00 }   h2 { background-color: transparent } p { background-color: rgb(250,0,255) } </style> </head> < ...
  • Asas Membuat Template Wordpress
    Penyediaan Tempat Sebelum kita mula membina templat untuk Wordpress, pastikan dahulu anda telah memasang siap Wordpress di dalam localhost anda untuk tujuan memudahkan kerja. Tutorial pemasangan boleh dicari di internet. Kemudian buat satu fail pelipat (folder) untuk template tersebut dibahagian fol ...
  • Email
    Fungsi mail() Fungsi PHP mail() digunakan untuk menghantar email menggunakan koding. Tatatanda mail(to, subject, message, headers, parameters)   ...
Hubungi kami Memohon tutorial KripStatus Terbaru   Maklum balas Ruangan tetamu