01 Juni, 2009

Membuat Sudut dengan Border

Semua contoh di bawah ini menggunakan tag <div>, dengan tanpa konten:
<div syle="style value"></div>

contoh border sederhana

Contoh border sederhana di atas menggunakan style:
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;

Dengan sedikit trik, border diatas bisa menjadi lebih menarik dengan menghilangkan konten. Karena browser tertentu akan mengabaikan tag tanpa konten menjadi spasi kosong, jadi CSS tersebut harus ditambah seperti di bawah ini:
font-size: 0px; line-height: 0%; width: 0px; 
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
border-right: 20px solid green;

Jika border kiri dihilangkan akan menjadi seperti ini:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-right: 20px solid green;

2 border dihilangkan menjadi:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-right: 20px solid green;

Jika salah 1 dibuat transparan akan menjadi seperti ini:
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid red;
border-right: 20px solid transparent;

Dengan dasar di atas kita bisa membuat berbagai bentuk dasar seperti di bawah ini.
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #77e;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-bottom: 20px solid #77e;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid #transparent;
border-right: 20px solid #77e;
border-bottom: 10px solid #transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-top: 10px solid transparent;
border-left: 20px solid #77e;
border-bottom: 10px solid transparent;

font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #77e;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #77e;

font-size: 0px; line-height: 0%; width: 0px;
border-left: 20px solid #77e;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #77c;



taken from: howtocreate.co.uk

15 komentar:

  1. hmmm... soal editing html code lagi... no comment deh mas :D

    BalasHapus
  2. bikin berat nggak om?
    Njenengan disebelah kec ulujami yang mana toh?
    koramil po?

    BalasHapus
  3. Wah Artikel Bagus, jadi tambah ilmu nih
    terimasih

    BalasHapus
  4. mantab neh tips nya..
    bisa terbesit sampe situ ya, memanfaatkan html :D

    BalasHapus
  5. weits...keren nih..kreasi terbaru :) (maksudnya baru kulihat,hehehe)...kreatif kawan. jago CSS nih :)

    BalasHapus
  6. Mas.. Kalau caranya bikin border gambar gmn???

    BalasHapus
  7. @devil devinity: ya sama seperti contoh pertama.. tinggal menabah konten (gambar) saja..

    < div syle="style value" >< img scr="url gambar"/ >< /div >

    *tanda < dan > tanpa menggunakan spasi*

    BalasHapus
  8. bagus jg nih info....siiip...

    BalasHapus
  9. bang,
    blognya bagus, dibagian framenya
    ajarin nada bikin dnk

    BalasHapus
  10. thanks bos atas informasinya saya paste nih ya

    BalasHapus
  11. baru 2 hari nih bkin blog, baru belajar... masih blum ngeh tentang script2 gitu.. :( temen2 ada yang mau ngasih info ato ngajarin? kunjungi blog saya ya, kasih komen kurang apa... biar bisa jadi bagus kaya punya temen2 yang laen.. :)

    http://dunia-mimpi-bayu.blogspot.com/

    BalasHapus
  12. Siip.. manteb.. thanks yach..

    BalasHapus