Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Banyak hal yang terkadang suka kita lupakan, terutama dalam hal etika penggunaan elemen pendukung bagi layouts yang kita gunakan. Kita mengetahui banyak dari Blogger yang bordermenggunakan sebuah layouts yang memiliki tampilan yang sangat elegan layaknya sebuah website komersil. Hal ini tentu sah-sah saja, selama memberi citra yang baik dan tidak melupakan jati diri sebagai Blogger ( blogspot, wordpress,dll).

Format layouts yang ditampilkan pada kategori sebuah template baru, cenderung banyak menggunakan tampilan sebuah gambar sebagai element pendukungnya. Kalau kita lihat hal ini tentu saja sama dengan proses pembangunan design sebuah template pada website komersil. selain itu, kita juga bisa melihat tampilan Border sebagai "line / garis" pembentuk bagi display sebuah template. Peran penting dari si Border inilah yang akan kita bahas pada kesempatan kali ini, namun sebelum kita membahas terlalu jauh ada baik kamu paham akan arti dan fungsi dari border itu sendiri.
Pengertian Border
Border dalam pengkodean bisa kita artikan sebagai : garis tepi atau batas pada sebuah komponen.
Penulisannya
Dalam format Kode CSS biasa kita gunakan border:#000 solid 1px;, border:#fff dashed 2px;
  • Pada format penulisan Border:#000solid1px; , kode yang berwarna merah menunjukkan warna dari si border ( dalam hal ini kita mengununakan kode warna hitam ),
  • kemudian yang berwarna hijau menunjukkan jenis dari bordernya sendiri, ( dalam hal ini kita menggunakan jenis garis yang solid atau menyambung.
  • Dan terakhir pada kode yang berwarna orange menunjukkan ukuran dari si Bordernya itu sendiri ( Ukuran 1px , adalah ukuran untuk satuan terkecil dalam layar moitor. ) maka hasilnya akan seperti ini..
contoh


Dari contoh diatas akan kian buat sebuah variasi dimana kita bisa membuat sebuah format untuk tampilan layouts dengan border yang melengkung pada sisi-sisinya. nah contohnya bisa kamu lihat disini :

contoh


Dari contoh diatas k'ian hanya menambahkan sebuah kode :
-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;
Dalam hal penulisannya sebagai berikut:
Border:#000 solid 1px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;
penjelasannya :
-moz-border-radius-topleft: 10px; = sisi garis sebelah kiri atas dengan lengkungan 10 pixel.
-moz-border-radius-topright: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.
-moz-border-radius-bottomright: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.
-moz-border-radius-bottomleft: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.
Untuk beberapa modifikasi bisa kamu gunakan hanya 2 format dari kode diatas, contohnya :

contoh

Border:#000 solid 1px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;
Dari kode diatas bisa kamu lihat bahwa kode yang k'ian gunakan adalah :
-moz-border-radius-topleft: 10px; = sisi garis sebelah kiri atas dengan lengkungan 10 pixel.
-moz-border-radius-topright: 10px; = sisi garis sebelah kanan atas dengan lengkungan 10 pixel.
dengan penjelasan bahwa format lengkungan yang k'ian buat berada pada sisi sebalah kiri atas dan kanan atas. sedangkan jika kita mau membuat lengkungan pada sisi kanan bawah atau sisi kiri bawah, cukup dengan mengganti kode berikut :
-moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;
maka hasilnya sebagai berikut :

contoh


Untuk hasil yang berbeda yakni membuat lengkungan pada sisi bagian atas dan bagian bawah saja bisa dengan format sebagai berikut :
-moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px;
maka hasilnya akan sebagai berikut :

contoh


nah untuk jenis-jenis dari border itu sendiri bisa kamu lihat disini

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

6 Response to "mengenal arti dan penggunaan border pada display Blog"


  1. Kian Coi Said,

    @ maksih sob da mampir and kasih comment, btw, roundet corner emang hal yg paling simple untuk membentuk tampilan display yg elegan...!!! ...Replay

     

  2. Unknown Said,

    kunjungan perdana,,salam kenal
    meski aku ngga paham soal ginian maklum gaptek hehe,,tapi bermanfaat tips2nya,,

    makasih, ...Replay

     

  3. Kian Coi Said,

    @ aan : makasih da comment..jangan sungkan-sungkan untuk selalu mampir disini...!!! ...Replay

     

  4. Anonymous Said,

    k, bleh tanya? gmna cara membuat border punya efek shadow kyak di blog ini??
    blog saya : BryZONE ...Replay

     

  5. Kian Coi Said,

    @BryZONE : sabar yach..nanti aq posting..!!! ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |