3
Jenis-jenis border dan cara pembuatannya
Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini juga. Yaitu Jenis-jenis border dan cara pembuatannya. Seperti yang kita ketahui border ini selain sebagai pembatas, juga sekaligus berfungsi untuk mempercantik tampilan blog.

Penulisan border ini sendiri juga bisa dengan memberikannya secara individu atau arahannya: yaitu atas, bawah, kiri, kanan. Untuk pengaturan dan properti CSS border ini kita bisa menggunakan perintah dari keterangan CSS dibawah ini.

Property Border:

  1. Border-color : berfungsi untu menentukan warna.
  2. Cara penentuan warna dari border ini bisa langsung dengan menyebutkan nama dari warna tersebut dalam bahasa inggris. Contoh penulisan:
    border-color:red;
    border-color:blue;
    dsb..
    
    Atau juga dengan menggunakan hex-code atau rbg. Contoh :
    border-color:#000; = Hitam pekat, 
    border-color:#FFF; = Putih,
    dan lain sebagainya.
    
    border-color:rgb(255, 255, 0); untuk warna kuning, 
    border-color:rgb(0, 0, 255); untuk warna biru.
    Dsb..
    
    Contoh: Property Border-color Individu
    border-top-color: red;
    border-right-color: #FF6600;
    border-bottom-color: rgb(128, 0, 128);
    dsb
    
    Untuk menentukan warna dalam bentuk kode ini kita bisa menggunakan color picker yang ada pada program-program design atau bisa juga dengan mencarinya di internet langsung. Ada banyak kok situs yang menyediakannya. Bahkan diblogger sendiri, untuk yang type sederhana kita bisa langsung mendapatkannya di bagian setting template melalui dahsboard kita. Atau jika mau anda juga bisa memasangnya di blog sendiri kalian bisa mendapatkan scriptnya diposting Cara membuat Color Picker diblog.
  3. Border-style  : berfungsi untuk menentukan style atau pola dari border.
  4. Value Border-Style antara lain:
    Contoh penulisan:
    border-style:solid, 
    border-style:double.
    Dsb..
    
    Contoh: Property Border-style Individu
    border-top-style:solid;
    border-right-style: dotted;
    border-bottom-style: double;
    border-left-style: dashed;
    
  5. Border-width: berfungsi untuk menentukan ketebalan dari border.
  6. Untuk penentu ketebalan border kita bisa kode initial, medium atau thick. Namun umumnya dalam proses design website atau template blog, yang biasanya digunakan satuan panjang seperti px, em, cm, in, dsb.
    border-width:1px; 
    border-width: 2em;
    Dsb..
    
    border-top-width: 1px
    border-right-width: 2px;
    border-bottom-width: 1em;
    border-left-width: cm;
    Dsb..
    
    Namun pada umumnya tidak semua kode-kode tersebut pasti kita pakai. Biasanya kita juga hanya menuliskannya secara singkat. Untuk penulisan singkat ini kita gunakan jika border yang ingin kita buat memilik style, warna, dan ketebalan yang sama. sebagai contoh kita ingin membuat border kolom kontent dengan border property sebagai berikut: Ketebalan border = 5px Style border = ridge dan warna border = merah. Maka untuk penulisan secara individunya kita akan menuliskan seperti ini.
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    
    border-top-style: ridge;
    border-right-style: ridge;
    border-bottom-style: ridge;
    border-left-style: ridge;
    
    border-top-color: red;
    border-right-color: red;
    border-bottom-color: red;
    border-left-color: red;
    

Anggap disini adalah content

Namun karena border yang ingin kita buat memilik style, warna, dan ketebalan yang sama, maka penulisannya cukup dengan kode seperti dibawah ini:
border: 5px ridge red;

Dan penulisan kode singkatnya ini memilik sifat otomatis. Jadi meski penulisannya terbalik-balik juga tidak masalah.
border: 5px ridge red; atau,
border: ridge 5px red; atau
border: red 5px  ridge;
dsb,,
hasil yang didapatkan adalah sama.

Poskan Komentar

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top