Membuat Bingkai garis sederhana dengan background warna

Bagikan :

Tweet

Kali ini saya akan share sedikit mengenai Membuat Bingkai garis sederhana dengan background warna. Untuk mempercantik memisahkan postingan serta memasukkan tulisan atau kode Html kita membutuhkan sebuah bingkai baik bingkai foto, bingkai kayu,maupun bingkai lainnya! 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 ...sahabat bisa mengcopy kode HTML nya dan copy paste ke postingan sobat atau boleh juga buat edit html java script...

Langsung saja kita Mulai ....>>>>>

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 bermanfaat buat sobat semua.

"Membuat Bingkai garis sederhana dengan background warna
"

Tag : Tutorial Blog