Membuat Kotak Html Keren

Membuat kotak dengan kode HTML yang keren,Kali ini saya akan share demi melengkapi tutorial dan trick untuk mendesign blog.semoga tutorial yang saya bagikan ini berguna untuk para pengunjung di blog saya.Oke langsung saja.

Membuat kotak untuk postingan blog atau buat apa saja terserah anda disini saya akan berikan contoh dan script nya plus penjelasan apa yang bisa anda rubah nanti pada kotak.

Membuat kotak Type Groove

Contoh bentuknya seperti dibawah ini,penampakannya,

TEXT DISINI

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 4px; border-style: groove; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>

Membuat Kotak double Border

Contoh penampakannya

Text anda disini

Script nya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 5px; border-style: double; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> Text anda disini</div>

Membuat kotak model inset

contoh penampakan

Text Anda

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 5px; border-style: inset; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> Text Anda</div>

Membuat Kotak Type Dooted

Contoh penampakannya

TEXT DISINI

Scripnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 2px; border-style: dotted; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>

Membuat Kotak model Dashed

Contoh Penampakannya

TEXT DISINI

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 2px; border-style: dashed; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>

Membuat Kotak Model Ridge

Contoh Penampakannya

TEXT DISINI

Scriptnya

<div style="width: 500px; height: 100px; background-color: #a9bac2; border-color: #000000; border-width: 7px; border-style: ridge; color: #ff0303; font-size: 14px; font-family: Arial; overflow: auto;"> TEXT DISINI</div>


Dari 6 model diatas silahkan anda ganti Width,backgroundnya,border colornya font size,whatever terserah selera anda,silahkan anda ganti.

Oke sekian dulu sob membuat kotak dengan HTML,besok kita lanjut dengan tutorial yang lainnya.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Related Articles :