Kembali berjumpa dengan adam dalam acara PF Tutorial yang dipersembahkan oleh platinumfreak.blogspot.com.... Hahahahaha... Waduh? Udah kaya MC Internasional yah? Wuahahaha...

Ya, kali ini saya akan membahas tentang bagaimana mempercantik border dengan menggunakan CSS. Dalam postingan saya kali ini, saya akan mengajak anda untuk masuk kedalam dunia kreasi (Dimana tuh?) . Yang mana, dengan kreasi ini, diharapkan border yang anda gunakan ada pembaruan. Lebih fresh... Hmmmmm... Seperti apa cara memoles bordernya?

Dalam posting ini akan dibahas lebih lanjut bagaimana saja tips, trik, masalah yang muncul, serta alternatif dari penggunaan CSS border ini.

Langsung saja tidak perlu berlama-lama, karena saya mau bobo. Nguantuk broo... Whoooahh...

Dalam CSS yang diterapkan border. Penggunaannya bermacam-macam. Biasanya untuk menggunakan border biasa, anda hanya cukup menulis seperti ini: "border:12px;" dan sebagainya.

Namun, apa jadinya bila anda menginginkan border seperti gambar-gambar yang dilingkari merah dibawah ini.

Coba perhatikan gambar penampakan dibawah ini. (Hantu kalee...)

Gambar 1AGambar yang dilingkari merah ini hanya menggunakan CSS

Gambar 1BGambar yang dilingkari merah ini hanya menggunakan CSS

Gambar 1CGambar yang dilingkari merah ini hanya menggunakan CSS

Dalam CSS, penggunaan script CSS pada setiap web browser berbeda-beda. Bila anda hanya menuliskan script CSS untuk browser Mozilla Firefox, sementara anda tidak menulis untuk browser Opera, atau Chrome, atau Safari, tampilan border anda tidak akan berubah.

Untuk lebih jelasnya, coba perhatikan tabel dibawah ini agar anda paham.

• Coba lihat pada gambar 1A. Agar hasilnya nampak seperti gambar 1A, penulisan CSS-nya setiap akhiran ; pada border, anda tambahkan script diatas. Maka penulisannya kurang lebih seperti ini.
  
  
  border:5px solid #000000;-moz-border-radius-topleft: 20px 20px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 20px 20px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 20px 20px;-border-bottom-left-radius: 0px 0px;

  setelah tandai semua, tekan ctrl+c, lalu paste di blog anda


• Sedangkan pada gambar 1B, maka penulisan CSS-nya kurang lebih seperti ini.
  
  
  border:5px solid #000000;-moz-transform: skew(32deg,12deg);-webkit-transform: skew(32deg,12deg);

  setelah tandai semua, tekan ctrl+c, lalu paste di blog anda
  
  Untuk gambar 1B itu, menggunakan tampilan skew. Mainkan saja tampilannya dengan merubah script skew(32deg, 12deg). Atau anda juga bisa mengubah tampilannya dengan mengutak-atik bakcground, color, serta bordernya sendiri. Tampilan efek skew seperti ini akan lebih bagus hasilnya bila dilihat menggunakan web browser Google Chrome, dan Opera.


• Untuk gambar 1C yang dilingkar merah pada menu PF Award itu, efeknya menggunakan rotate. Cara penulisannya seperti ini.
  
  
  border:5px solid #000000;-moz-border-radius:8px;-webkit-border-radius:8px; -webkit-transform: rotate(13deg);-moz-transform: rotate(13deg);

  setelah tandai semua, tekan ctrl+c, lalu paste di blog anda


• Untuk gambar 1C yang dilingkar merah pada menu Contact Person itu, sama seperti gambar 1A. Hanya saja, kalau pada gambar 1A top-left, dan bottom-left, sedangkan gambar 1C, top-right, dan bottom-right. Seperti ini scriptnya.
  
  
  border:5px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;

  setelah tandai semua, tekan ctrl+c, lalu paste di blog anda

Anda juga bisa berkreasi dengan ini. Border ini sangat bermanfaat untuk menghias menu horizontal anda. Kemudian anda dapat gunakan pada border yang lain, seperti border postingan anda, border spoiler anda, dan lain-lain.

Saya akan berikan beberapa contoh yang lain, agar blog anda tampil lebih atraktif.
Misalnya ini:

adam's border theme 1
<div style="margin:5px 0px 5px 30px; width:200px; text-align:center; padding:10px; background:#000000; color:#00FF00; border:8px;-moz-border-radius: 2em 0;-webkit-border-top-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;"> "Taruh semua Tulisan/Script disini"</div>
setelah tandai semua, tekan ctrl+c, lalu paste di blog anda


adam's border theme 2
<div style="margin:5px 0px 5px 30px; width:200px; text-align:center; padding:10px; background:#FF0000; color:#FFFFFF; border:8px;-moz-border-radius: 20px;-webkit-border-radius: 20px;"> "Taruh semua Tulisan/Script disini"</div>
setelah tandai semua, tekan ctrl+c, lalu paste di blog anda


adam's border theme 3
<div style="margin:5px 0px 5px 30px; width:200px; height:250px;text-align:center; padding:10px; background:#FFFFFF; color:#000000; border:8px solid #000000;-moz-border-radius-topright: 50px 50px; -moz-border-radius-bottomright: 50px 50px; -webkit-border-top-right-radius: 50px; -webkit-border-bottom-right-radius: 50px;"> "Taruh semua Tulisan/Script disini"</div>
setelah tandai semua, tekan ctrl+c, lalu paste di blog anda

Belum paham? Langsung saja tanya pada saya?