Monday 14 January 2013

Fungsi Border, Jenis dan Contohnya V.2

Sebelumnya kita sudah membahas tentang jenis - jenis border dalam artikel Fungsi Border, Jenis Dan Contohnya V.1 antara lain :
  • Border-Color
  • Border-Width
  • Border-Style 
Bagi yang belum membaca nya silahkan klik disini     Fungsi Border, Jenis Dan Contohnya V.1

Diantara jenis - jenis border diatas masih ada lagi bagian properti dari jenis border tersebut yang masih akan kita bahas, berikut penjelasannya.

Jenis - jenis Properti Border : 

  • border-top-style
  • border-top-width
  • border-top-color
  • border-right-style
  • border-right-width
  • border-right-color
  • border-left-style
  • border-left-width
  • border-left-color
  • border-bottom-style
  • border-bottom-width
  • border-bottom-color
Berikut contoh kodenya :
-Contoh kode 4
border-top-style

<div style="background-color:blue;width:300px;height:auto;border-top-style:solid;border-top-color:red;border-top-width:5px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A

-Contoh kode 5
 border-top-style & border-right-style:dotted

<div style="background-color:blue;width:300px;height:auto;border-top-style:solid; border-top-color:red;border-top-width:5px;border-right-style:dotted;border-right-color:silver; border-right-width:8px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A




Sekarang kita akan membahas jenis - jenis dari properti border shorthand. Border Shorthand ialah singkat, maksudnya singkat adalah kode yang kita pakai bisa disingkat agar lebih hemat laman post box kita, penulisan dengan teknik shorthand sendiri lebih cepat karena kita tidak lagi menulis style nya dengan panjang, mengerti maksudnya bukan? ya pasti mengerti.

Penulisan properti border shorthand antara lain seperti berikut :
  • border
  • border-top
  • border-right
  • border-left
  • border-bottom
Dengan teknik ini kita sudah tidak memakai properti border-top-style, border-right-color, border-bottom-width dan sebagainya, melainkan dengan cara menggunakan teknik value border dengan cara shorthand seperti ini:

-Value border-width(spasi)Value border-style(spasi)Value border-color

  • Border
Border:Value; berfungsi untuk membuat sekitar tag/bidang/box memiliki style garis pinggir, sedangkan value tiap - tiap sisi akan bernilai sama.
Berikut contoh kode nya :

-contoh kode 6
Border:Value

<div style="background-color:#c27ba0;width:300px;height:auto;border-style:solid;border-color:red;border-width:5px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Apabila dibuat dengan cara Shorthand maka akan menjadi seperti dibawah ini

<div style="background-color:#c27ba0;width:300px;height:auto;border:5px solid red;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A


  • Border-top
Border-top:Value berfungsi untuk membuat style garis pinggir bagian atas box

Berikut Contoh kode nya :

-contoh kode 7
border-top:Value

<div style="background-color:#c27ba0;width:300px;height:auto;border-top-style:solid;border-top-color:red;border-top-width:5px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Apabila dibuat dengan cara Shorthand maka akan menjadi seperti dibawah ini

<div style="background-color:#c27ba0;width:300px;height:auto;border-top:5px solid red;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A


  • Border-right
Border-right:Value berfungsi untuk membuat style garis pinggir sebelah kanan box
Berikut Contoh kode nya :

-contoh kode 8
Border-right:Value

<div style="background-color:#c27ba0;width:300px;height:auto;border-right-style:double;border-right-color:green;border-right-width:6px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Apabila dibuat dengan cara Shorthand maka akan menjadi seperti dibawah ini

<div style="background-color:#c27ba0;width:300px;height:auto;border-right:6px double green;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A


  • Border-left
Border-left:Value berfungsi untuk membuat style garis pinggir bagian kiri box
Berikut Contoh kode nya :

-contoh kode 9
Border-left:Value

<div style="background-color:#9fc5e8;width:300px;height:auto;border-left-style:solid;border-left-color:red;border-left-width:5px;">
C O N T O H
I S I / T E K S
A N D A
k o n t e n t / i s i
</div>

Apabila dibuat dengan cara Shorthand maka akan menjadi seperti dibawah ini

<div style="background-color:#9fc5e8;width:300px;height:auto;border-left:5px solid red;">
C O N T O H
I S I / T E K S
A N D A
k o n t e n t / i s i
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A
 

  • Border-bottom
Border-bottom:Value berfungsi untuk membuat style garis pinggir bawah box
Berikut contoh kode nya :

-contoh kode 10
Border-bottom:Value

<div style="background-color:#9fc5e8;width:300px;height:auto;border-bottom-style:solid;border-bottom-color:red;border-bottom-width:5px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Apabila dibuat dengan cara Shorthand maka akan menjadi seperti dibawah ini

<div style="background-color:#9fc5e8;width:300px;height:auto;border-bottom:5px solid red;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A

Catatan :
Jika anda membuat style pada menu tag html, contoh: jika anda memberi nilai value width:200px; kemudian anda menambahkan border width:40px; maka nilai width tag yang tadi akan menjadi 280px, dalam catatan border memberi nilai pada nilai tag tersebut.

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Fungsi Border, Jenis dan Contohnya V.2 , selamat mencoba. Jika ada yang tidak di pahami silahkan bertanya pada kolom komentar.

Terima Kasih.

2 comments: