Dalam tabel kode CSS3 yang pernah saya posting sebelumnya, kode untuk border memiliki beraneka macam, tentunya berbeda-beda untuk setiap kodenya. Nah di sini saya akan sedikit menjelaskan fungsi dari kode border tersebut. Jika anda mendownload tabel CSS3 kemarin pada border kurang lebih terdapat kode seperti ini
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Nah sebagai contoh penjelasannya kita gunakan kode berikut.
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px solid #000;"> CONTENT ANDA </div>
Perhatikan kode di atas.
- pada kode border, 4px menunjukkan ketebalan border
- pada kode yang berwarna merah solid merupakan kode untuk border yang akan berupa garis biasa.
- setelah kode solid, terdapat kode warna #000, yang merupakan warna dari border tersebut
Untuk mengetahui perbedaan bordernya maka kita tinggal mengganti kode solid, dengan kode-kode sesuai dengan kode yang sudah saya tulis diatas.
- Dari kode di atas maka akan terbentuk sebuah kolom seperti ini
CONTENT ANDA - Selanjutnya kita ganti kode solid dengan dotted, hasilnya seperti ini.
CONTENT ANDA - Selanjutnya kita ganti kode dotted dengan dashed, hasilnya seperti ini.
CONTENT ANDA - Selanjutnya kita ganti kode dashed dengan double, hasilnya seperti ini.
CONTENT ANDA - Selanjutnya kita ganti kode double dengan groove, hasilnya seperti ini.
CONTENT ANDA - Selanjutnya kita ganti kode groove dengan ridge, hasilnya seperti ini.
CONTENT ANDA - Selanjutnya kita ganti kode ridge dengan inset, hasilnya seperti ini.
CONTENT ANDA - Selanjutnya kita ganti kode inset dengan outset, hasilnya seperti ini.
CONTENT ANDA
Kode diatas hanyalah sebagai contoh saja, pada intinya saya hanya menjelaskan macam-macam border pada CSS3. semoga bermanfaat... ^^,
13 Comments:
OK thanks buat sharingnya ya
Akan dicoba semua kang :D
thanks udah share infonya...good blog and good post
met pagi,, umy berkunjung,,,,
makasih banget ne, infonya
kunjungan balik skalian follow kawan....
di tggu follow baliknya kawan.......
nice info........
mel mau coba ah....biar jd kaya master mazda
kinjungan siang.absen ^_^
yang aq denger katanya CSS 3 itu b erat yah sob
manteb nih, nambahin koleksi css klo pgn edit" template, lanjutkaaan ! :D
terima kasih om atas informasinya, sangat bermanfaat.
ijin saya simpen yah, kebetuLan saya Lagi beLajar utak-atik CSS nih.
mohon maaf agak teLat ngabsen nih.
seLamat pagi, seLamat menjaLankan aktifitas dan saLam sukses seLaLu.
@all, Terima Kasih kunjungannya, segera saya akan berkunjung balik ke blog anda,
@Rizky2009, Kalo menurut saya semua kode itu berat mas, untuk itu utamakan kode yang penting2 saja, dan kalopun kodenya masih memberatkan blog tidak ada salahnya untuk melakukan convert. Terima kasih kunjungan + commentnya...
aku dah mau tanya ehh ternyata udah ada master rizky yang duluan,,apa kbr bang rizky lama gak saling silahturahmi,,buat kang masda semoga sukses trus ya,,ada yang mau saya pelajari dari kang masda cuma saya malu klo blg di sini hehehehhehehee......nnti aja ahh..:)
Gan, mau nanya nih... kalo border yang sudutnya tidak lancip kodenya apaan yah ?
<http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif
Blog ini "DOFOLLOW", Silakan tinggalkan komentar anda, bebas tapi sopan. Tidak kami anjurkan untuk mencantumkan link pada komentar serta memakai nama Anonymous.
Komentar yang bernada SPAM atau SARA akan kami hapus.
Post a Comment