Mempercantik Border dengan CSS

Unknown - Senin, 17 Januari 2011 - 10.24.00 wita
Sekarang saya akan melanjutkan mempercantik Border Blog dengan css, seperti apa yang saya  posting sebelumnya, mengapa saya bahas kembali ? - karena apa yang disampaikan oleh mas Adam makin lama makin asyik saja benar adanya bagi saya secara pribadi, bagaimana kawan apa nggak tertarik seperti Menu Horizontal pada Blog saya ini. 


Kalau dilihat dari scriptnya sepertinya memusingkan kepala, karena urutan pembuatannya tidak diketahui, makanya sekarang saya akan mencoba mengupas cara pembuatannya biar jangan membingungkan atau memusingkan kepala.
Okey langsung saja, pada Dasbor kawan Klik tambah Gadget / elemen baru, tapi sebelumnya saya copas dulu di punyanya mas Adam Dasar-dasarnya yaitu seperti berikut : 








Tabel tersebut menunjukkan tampilan Blog kita biar tidak ada perubahan,  umpama di Chrome bagus tapi belum tentu bagus kelihatannya di Mozilla maupun di Internet Explorer (IE) karena disini saya anggap yang paling bikin jantung deg-degan. 
Biar pembicaraan kita tidak melebar, baiklah langsung saja ke pokok masalah : 







Selanjutkan mari kita perhatikan perbedaan - perbedaannya :





<table border="2">

<tr><td align="center">
CONTOH 
</td></tr></table>


Ini adalah bentuk table biasa, sekarang mari kita tambahkan css




<div style="border:2px solid #000000;-moz-transform: skew(32deg,12deg);-webkit-transform: skew(32deg,12deg);">


CONTOH</div>


Warna merah adalah kemiringan tabel


<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius:0px 0px;border-bottom-right-radius: 10px 10px; ">CONTOH </div>


<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius- bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius:10px 10px;-border-bottom-left-radius: 0px 0px;">CONTOH</div>


Coba perhatikan angkanya topleft:10px 10px artinya sudut di kiri atas melengkung sebesar 10px dan bottomleft: 0px 0px  artinya sudut di kiri bawah tidak melengkung alias lurus.


<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;">CONTOH</div>


<div style="border:2px solid #000000;-moz-border radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px; ">CONTOH</div>


<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px;">CONTOH </div>


Bagaimana kawan apa bisa dipahami, sedangkan untuk model yang lainnya silahkan kawan mencoba variasinya. 



Berbagi Artikel :

Mempercantik Border dengan CSS
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Mempercantik Border dengan CSS
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

13 Komentar pada : “Mempercantik Border dengan CSS”

  1. sya cba ya....
    :14

    bgus bnget ni diberandanya, gmna tU cra buaanya..?
    :29

    BalasHapus
  2. mantab banget tutorialnya.. trus berandanya juga Ok.
    gimana cara buatnya boss
    salam kenal

    BalasHapus
  3. trims kawan-kawan kunjungan dan commentnya, tunggu saja postingan berikut tahap demi tahap :26

    BalasHapus
  4. Thank's buat border radiusnya, ini di panggil di html div bukan di css ya?

    BalasHapus
  5. trims kawan Blogger Admin kunjungannya, benar seperti judul di sidebar, tapi kalau kawan ingin langsung pada css template bisa juga saya sudah coba di sidebar pada Blog di http://balaitajuk.blogspot.com/

    BalasHapus
  6. memang border radius berfungsi namun IE harus banyak belajar menyesuaikan.

    BalasHapus
  7. mantap gaN. . .
    tapi klo bisa bikin kayak yang di kasku tu gmna ya???
    bikin yang bisa scroll gitu ??

    BalasHapus
  8. yang selama ini saya cari akhirnya ketemu disini...
    cara membuat slide daftar isi
    makasih ya...

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan




BANNER [300x250]
© 2013 - BC INFO | Powered by Blogger
Design Template by : Blogger Edan