Fantastic Scroll Box using CSS3 RGBA

Spectacular rgba Scroll Box

Background rgba mampu membentuk sebuah efek transparansi yang berbeda dengan penggunaan opacity. Pada background rgba, transparansi yang tercipta pada box terdalam (DIV) tidak akan mempengaruhi box (DIV) yang dibangun sesudahnya. Ini akan memungkinkan kita menampilkan sebuah background terdalam pada keseluruhan desain.
Kita bisa perhatikan pada Scoll Box ini. Sekalipun sebenarnya hanya dengan memberikan sebuah background warna hitam pada box terdalam, sebenarnya sudah mampu memberikan penampilan yang amat luar biasa cantik. Namun demikian, karena sifatnya yang berfungsi untuk memberikan efek transparansi, maka akan lebih "afdol" seandainya sampeyan gunakan sebuah background image pada box terdalam (DIV pertama - div class="boxe").

Penggunaan sebuah background warna cerah pada scroll Box ini juga tak kalah menariknya. Sampeyan tinggal pilih untuk menggunakan warna background yang paling tepat sehingga efect transparansi melalui background rgba ini mampu ditampilkan secara maksimal.

Scroller box di atas hanyalah satu contoh saja dari scroll box yang hampir semua elemen warnanya, baik background, border, text shadow, box shadow atau drop shadow mengunakan CSS3 rgba. Scoll Box ini juga sangat fleksibel penggunaanya karena untuk merubah ukuran lebar box hanya perlu dilakukan dengan merubah nilai width yang terdapat di syntax .boxe-1 { width: ...px;. Angka pada titik-titik tersebut bisa segera dirubah sesuai lebar yang di inginkan.

Untuk menggunakan scroll box luarbiasa ini cukup lakukan dengan menyimpan seluruh kode CSS di template, di atas kode ]]></b:skin> kemudian KLIK SAVE/Simpan Templates. Kode HTML (xHTML) gunakan di posting atau di widget. Apabila sampeyan menggunakan Scroll box ini di ruang posting, harap semua kode dibuat dalam bentuk rapat. Untuk membuat spasi sampeyan bisa gunakan <br /> (yang dirapatkan terutama setiap DIV : div class="boxe" hingga div class="boxe-4). Jadi bentuknya akan seperti ini :

<div class="boxe"><div class="boxe-1"><div class="boxe-2">Title</div><div class="boxe-3"><div class="boxe-4">Text and images here!</div></div></div></div>

Cara menggunakan Kode Sroll Box

• Login : Login to Blogger.
• Dasboard : KLIK "Design" atau "Rancangan".
• Page Elements : KLIK "Edit HTMl".
• Find CSS Code : Cari kode ]]></b:skin>, kemudian copy dan pastekan Kode CSS Scroll Box di atasnya.
• KLIK "SAVE Templates" atau "Simpan Template".
• Gunakan xHTML Scroll Box di halaman Posting atau di widget.
• Bila belum jelas silahkan buka "Special Tutorials" di kiri atas halaman blog (menu). Di sana ada beberapa tutorial dasar penting yang berisi panduan tentang mencari kode HTML secara cepat, mengganti template, tambah widget baru dan Cara back-up (mengamnankan) template yang sangat penting untuk dipelajari.

Kode CSS Scroll Box

.boxe {
      float: left;
      margin: 20px 2px;
      padding: 4px 2px;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      background: #eee url(http://img.theomegaproject.org/thumbs/2010/07/279.jpg);
}
.boxe-1 {
      margin: 0px auto;
      width: 300px;
      height: 400px;
      border: 2px solid #676767; 
      background: #cccccc;
      background: rgba(0,0,0, 0.2);
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      box-shadow: 1px 1px 10px rgba(0,0,0, 0.9);
      -moz-box-shadow: 1px 1px 8px rgba(0,0,0, 0.9);
      -webkit-box-shadow: 1px 1px 10px rgba(0,0,0, 0.9);
}
.boxe-2 {
      margin: 10px auto;
      margin-left: 10px;
      margin-right: 10px;
      background: #7a7a7a;
      background: rgba(0,0,0, 0.2);
      padding: 4px;
      text-align: center;
      border: 1px solid #aaa;
      border: 1px solid rgba(0,0,0, 0.04);
      box-shadow: 1px 1px 6px #fff;
      -moz-box-shadow: 1px 1px 10px #fff;
      -webkit-box-shadow: 1px 1px 6px #fff; 
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px; 
      font: 18px Serif;
      color: #FFCC99;
      text-shadow: 1px 1px 1px rgba(0,0,0, 1.0);
}
.boxe-3 {
      margin: 0 5px 5px 5px;
      float: left;
      background: #c2c2c2;
      background: rgba(0,0,0, 0.05);
      padding: 4px;
      max-height: 312px;
      border: 1px solid #888;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;  
      box-shadow: 1px 1px 20px #fff;
      -moz-box-shadow: 1px 1px 20px #fff;
      -webkit-box-shadow: 1px 1px 20px #fff;   
}
.boxe-4 {
      float: left;
      margin: 2px;
      padding: 3px;
      background: #575656;
      background: rgba(0,0,0, 0.4);
      height: 300px;
      overflow: auto;
      overflow-x: hidden;
      text-align: justify;
      line-height: 15px;
      font-family: Tahoma;
      font-size: 12px;
      border: 1px solid #666;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px; 
      color: #eee;
      text-shadow: 1px 1px 1px #000;  
}

xHTML Scroll Box

<div class="boxe">
<div class="boxe-1">
<div class="boxe-2">Box Cantik Serba rgba</div>
<div class="boxe-3">
<div class="boxe-4">
Background rgba mampu membentuk sebuah efek transparansi yang berbeda dengan penggunaan opacity. Pada background rgba, transparansi yang tercipta pada box terdalam (DIV) tidak akan mempengaruhi box (DIV) yang dibangun sesudahnya. Ini akan memungkinkan kita menampilkan sebuah background terdalam pada keseluruhan desain.<br/><img src="http://i52.tinypic.com/i74lrk.gif" style="opacity: 0.8; margin: 10px 10px 5px 0px; float: left; border: 3px solid #999; padding: 2px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;  height: 100px; width: 80px;" />Kita bisa perhatikan pada Scoll Box ini. Sekalipun sebenarnya hanya dengan memberikan sebuah background warna hitam pada box terdalam, sebenarnya sudah mampu memberikan penampilan yang amat luar biasa cantik. Namun demikian, karena sifatnya yang berfungsi untuk memberikan efek transparansi, maka akan lebih "afdol" seandainya sampeyan gunakan sebuah background image pada box terdalam (DIV pertama - div class="boxe"). <br/><br/>Penggunaan sebuah background warna cerah pada scroll Box ini juga tak kalah menariknya. Sampeyan tinggal pilih untuk menggunakan warna background yang paling tepat sehingga efect transparansi melalui background rgba ini mampu ditampilkan secara maksimal.
</div>
</div>
</div>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «