Membuat Bingkai Garis Sederhana Dengan Background Warna

Untuk mempercantik postingan kadang kita kerap memberi bingkai baik bingkai foto, bingkai kayu,maupun bingkai dari besi he he untuk penjelasan di atas..!!! jangan di terapkan karena bahan-bahan nya khusus untuk studio foto... Nah kalau di postingan ini kita mencoba membuat bingkai sederhana untuk mempercantik postingan...

Di bawah ini ada beberapa jenis bingkai yang tersedia sekalian dengan contoh dan kode nya ...sobat tinggal mengcopy kode dan copas ke postingan sobat atau boleh juga buat edit html java script...

 
1. Solid

kode nya :
<div style="border: 1px solid #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

2. Dotted

kode nya : 
<div style="border: 1px dotted #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

3. Double

kode nya :
<div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

4. Groove

kode nya :
 <div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

5. Outset

Kode nya:
<div style="border: 4px outset #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

6. Ridge

Kode nya:
<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan,gambar,maupun kode script
</div> 

Untuk Penjelasan nya:

Kode

<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div> 

Cara Memodif nya :

• background-color: #00CCFF untuk merubah warna latar bingkai nah jika sobat ingin warna yang lain silahkan klik di sini untuk mengambil kode warna lain nya .
• width: auto untuk lebar bingkai..bisa sobat rubah sesuai kebutuhan bisa 400px,500px dll..kalo saya sih..lebih suka dengan auto karena bingkai akan menyesuaikan dengan lebar halaman yang di tempati.
  
• Tulisan,gambar,maupun kode script di sini tempat anda menyisipkan tulisan,gambar maupun kode script.
  

Saya kira demikian aja dulu cara belajar membuat bingkai garis sederhana semoga bisa bermamamfaat buat sobat semua.

salam hangat admin
Sumber