SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Mempercantik Border dengan CSS

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. 

13 komentar pada “Mempercantik Border dengan CSS”

  1. WOW...cantiknyaaaa :14 :19

    BalasHapus
  2. sya cba ya....
    :14

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

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

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

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

    BalasHapus
  6. 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
  7. memang border radius berfungsi namun IE harus banyak belajar menyesuaikan.

    BalasHapus
  8. ooo.... gitu ya. Dicoba dulu ya...

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

    BalasHapus
  10. waduh pusing bacanya mas :(

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

    BalasHapus
  12. @Suwanto silahkan dicoba kalau berkenan :@

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger