Kamis, 03 Februari 2011

PF Tutorial 003 - Memoles Border Dengan CSS

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

Nah, bagaimana cara membuatnya? Cukup mudah.

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.
Mozilla FirefoxCSS3 (Opera Browser)Webkit Browser
-moz-border-radius-toprightborder-top-right-radius-webkit-border-top-right-radius
-moz-border-radius-bottomrightborder-bottom-right-radius-webkit-border-bottom-right-radius
-moz-border-radius-bottomleftborder-bottom-left-radius-webkit-border-bottom-left-radius
-moz-border-radius-topleftborder-top-left-radius-webkit-border-top-left-radius
-moz-border-radiusborder-radius-webkit-border-radius


Contoh:
  • 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.

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

  • Sedangkan pada gambar 1B, maka penulisan CSS-nya kurang lebih seperti ini.

    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.

  • Untuk gambar 1C yang dilingkar merah pada menu PF Award itu, efeknya menggunakan rotate. Cara penulisannya seperti ini.

    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.

    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.
! Trik PF BLog
Saya akan berikan beberapa contoh yang lain, agar blog anda tampil lebih atraktif.
Misalnya ini:
    adam's border theme 1
    setelah tandai semua, tekan ctrl+c, lalu paste di blog anda

    adam's border theme 2
    setelah tandai semua, tekan ctrl+c, lalu paste di blog anda

    adam's border theme 3
    setelah tandai semua, tekan ctrl+c, lalu paste di blog anda


Mungkin itu saja bro PF Tutorial-nya untuk kali ini.
Sekian... Semoga bermanfaat yah...

Karya penulisan asli serta script modifikasi: Muhammad Adam Firdaus


Dari blog master:

2 komentar:

  1. Info bagus, nanti bisa coba kuterapkan...

    BalasHapus
  2. ijin nyoba ya sob. Jangan lupa kunjungi http://shareroms018.blogspot.com
    blog tips dan trik yang terupdate

    BalasHapus

Kembali ke atas

Kembali ke atas