Membuat Tampilan Template 3D

Published by Kang Fathur Saturday, April 23, 2011

Membuat Template 3D, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada bagian template tersebut. Ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Kita bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. Contohnya untuk membuat bagian sidebar, Headder, dll dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.




Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah sebagai berikut ini.

1. Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus sobat lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :
   
   

   #sidebar1 .widget {
   margin: 0px 0px 5px 0px;
   padding: 5px 5px 5px 5px;
   background: #0000c0; /*-Background = Biru --*/
   border-top: 10px solid #6666ff; /*-Border atas = Biru Muda-*/
   border-bottom: 10px solid #6666ff; /*-Border Bawah = Biru Muda-*/
   border-left: 10px solid 1414b0; /*-Border kiri = Biru Tua--*/
   border-right: 10px solid 1414b0; /*-Border kanan = Biru Tua--*/
   }

   
   
   
2. Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :

#sidebar1 h2 {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000; /*-Background = Merah --*/
border-top: 5px solid #ff7070; /*-Border atas = Merah Muda--*/
border-bottom: 5px solid #ff7070; /*----Border Bawah = Merah Muda-*/
border-left: 5px solid #b00000; /*-Border kiri = Merah Tua-*/
border-right: 5px solid #b00000; /*Border kanan = Merah Tua--*/
}

Maka hasilnya akan seperti pada gambar dibawah ini :



Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan Sobat coba praktekkan tips ini pada template Sobat. Dan bila Sobat berminat dengan template 3D karya Kang Fatur, Sobat bisa lihat contoh templatenya dan mendownloadnya disini. Saya rasa cukup sekian dulu postingan Saya tentang cara membuat tampilan template 3D kali ini.

Untuk para sobat yang perlu kode warana V3 silahkan klik disini

Selamat mencoba semoga dapat bermanfaat dan salam Blogger mania.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI