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...)
Coba perhatikan gambar penampakan dibawah ini. (Hantu kalee...)
Nah, bagaimana cara membuatnya? Cukup mudah.
Dalam CSS, penggunaan script CSS pada setiap web browser berbeda-beda.
Untuk lebih jelasnya, coba perhatikan tabel dibawah ini agar anda paham.
Untuk lebih jelasnya, coba perhatikan tabel dibawah ini agar anda paham.
Mozilla Firefox | CSS3 (Opera Browser) | Webkit Browser |
-moz-border-radius-topright | border-top-right-radius | -webkit-border-top-right-radius |
-moz-border-radius-bottomright | border-bottom-right-radius | -webkit-border-bottom-right-radius |
-moz-border-radius-bottomleft | border-bottom-left-radius | -webkit-border-bottom-left-radius |
-moz-border-radius-topleft | border-top-left-radius | -webkit-border-top-left-radius |
-moz-border-radius | border-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:
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...
Dari blog master:
Info bagus, nanti bisa coba kuterapkan...
BalasHapusijin nyoba ya sob. Jangan lupa kunjungi http://shareroms018.blogspot.com
BalasHapusblog tips dan trik yang terupdate