Scroll Box with Transparency Effect (CSS3 Scroll Box)

Scroll Box CSS3Scroll Box dengan Efek Transparansi menggunakan CSS3. Klik untuk perbesar gambar!

Meskipun yang kita buat ini sebuah scroll box dengan efek transparansi, namun anda bisa menggunakannya sebagai sebuah box biasa. Hilangkan kode overflow:auto; maka jadilah dia menjadi box biasa. Membuat scroll box dengan efek transparansi diperlukan sebuah background image dengan ukuran sebanding ukuran box agar seluruh background terlihat memenuhi seluruh bagian box. Yang terutama diperlukan adalah perbandingan height x width box harus sama dengan height x width background image. Background image pada scroll box ini juga telah disetting untuk selalu sama dengan ukuran box melalui properti css background-size, sehingga sekalipun menggunakan background image sedikit lebih kecil atau lebih besar dari box, maka tak akan mempengaruhi penampilan scroll box.

Jika anda ingin melihat seperti apa bentuk scroll box css3 yang dilengkapi dengan efek transparansi ini, silahkan buka salah satu posting dan lihat di ujung terbawah halaman blog sebelum comment box. Efek transparansi yang disertai opacity effect dan css3 transition membuat box mampu memperlihatkan dua efek sekaligus yang bekerja berdasar hover efek. Jadi saat cursor berada di atas box efek akan bekerja dan secara perlahan transparansi terkurangi sedang opacity image bertambah hingga image sekaligus teks terlihat secara sempurna.

Kode CSS Scroll Box dg Efek Transparansi

Anda dapat menyimpan kode css ini melalui halaman edit HTML atau box css yang terdapat dalam fitur "Perancang Template (Template Designer).

Kode CSS:

.GRboksinfo{
        width:400px;
        margin:20px 0; 
        padding:0; /*original code by: gubhugreyot*/
        font-family:Arial,Tahoma;
        color:#003;
}
.GRboksinfo h3{      
        color:#CC9;
        font-size:16px;
        font-weight:normal;
}
.inGRboksinfo{
        padding:6px;
        border:1px solid #555;
        border-right-color:#999;
        border-bottom-color:#999;
background:#eee url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-scrollbox-transparency-effect.jpg) center no-repeat;
        background-size:cover; 
        border-radius:5px;
        box-shadow:0 0 3px #666;
        position: relative;
        margin:10px 0;
}
.content-inGRboksinfo{
        background:rgba(255,255,255,0.1);
        max-height:200px;
        overflow:auto;
        padding:10px;
        border:1px dotted #999;
        box-shadow:0 0 8px #fff;
        border-radius:3px;
        text-shadow:1px 1px 1px #fff;
        color:#033; 
        font-size:12px;
        text-align:justify; 
}
.content-inGRboksinfo,.content-inGRboksinfo img{
        transition:1s ease-in;
        -o-transition:1s ease-in;
        -moz-transition:1s ease-in;
        -webkit-transition:1s ease-in;
        -ms-transition:1s ease-in;
}
.content-inGRboksinfo img{
        max-width:150px;
        height:auto;
        background:#fff;
        padding:6px;
        border:1px solid #aaa;
        border-radius:4px;
        box-shadow:0 0 6px #666;
        float:left;
        margin:5px 8px 5px 0;
        opacity:0.4;
        filter:alpha(opacity=50);
}
.content-inGRboksinfo:hover img{
        opacity:1.0; /*original code by: gubhugreyot*/
        filter:alpha(opacity=100);
} 
.inGRboksinfo:hover .content-inGRboksinfo{
        background:rgba(255,255,255,0.7);
        text-shadow:1px 1px 2px #fff;
}

Cara Membuat scroll box dengan efek transparansi

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Pilih dan klik Edit HTMl.
5. Backup Template dengan cara :
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
6. Cari kode ]]></b:skin>. Gunakan Ctrl + F agar lebih mudah dan cepat.
7. Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
8. Klik Simpan Template (Save Template).

xHTML Scoll Box dg Efek Transparansi

Gunakan kode ini untuk posting atau bisa juga digunakan dalam box widget (lewat Add a Gadget » HTML/Javascript). Jika digunakan di box posting maka seluruh xHTML harus dibuat dalam bentuk rapat tak terputus antara tag satu dengan yang lain.

xHTML:

<div class="GRboksinfo">
<h3>Box with Transparency Effect</h3>
  <div class="inGRboksinfo">
    <div class="content-inGRboksinfo">
<img src="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s200/img_gubhugreyot-sample-posting.jpg" />Box dengan effect transparansi ini dibuat dengan memanfaatkan kode css3 background rgba dan css3 transition. Untuk membuat seluruh background tetap terlihat walaupun dalam box diletakkan sebuah image maka efek opacity kita manfaatkan bersama css3 transition hingga perubahan efek terlihat lebih menarik. Untuk membatasi ukuran image dalam scroll box kita gunakan properti <b>max-width</b> sebesar <b>150px</b>. Dengan setting ini secara otomatis semua image yang dimuat dalam scroll box akan mempunyai lebar maksimal 150px dan tingginya (height) akan menyesuaikan diri setara dengan perbandingan berdasarkan image sesungguhnya. Jika anda menghendaki image dengan ukuran berbeda silahkan rubah <b>150px</b> dengan nilai yang berbeda.
    </div>
  </div>
</div>

Contoh kode dalam bentuk rapat

Kode bentuk rapat untuk posting

<div class="GRboksinfo"><h3>Box with Transparency Effect</h3><div class="inGRboksinfo"><div class="content-inGRboksinfo"><img src="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s200/img_gubhugreyot-sample-posting.jpg" />Box dengan effect transparansi ini dibuat dengan memanfaatkan kode css3 background rgba dan css3 transition. Untuk membuat seluruh background tetap terlihat walaupun dalam box diletakkan sebuah image maka efek opacity kita manfaatkan bersama css3 transition hingga perubahan efek terlihat lebih menarik. Untuk membatasi ukuran image dalam scroll box kita gunakan properti <b>max-width</b> sebesar <b>150px</b>. Dengan setting ini secara otomatis semua image yang dimuat dalam scroll box akan mempunyai lebar maksimal 150px dan tingginya (height) akan menyesuaikan diri setara dengan perbandingan berdasarkan image sesungguhnya. Jika anda menghendaki image dengan ukuran berbeda silahkan rubah <b>150px</b> dengan nilai yang berbeda.</div></div></div>

Catatan/Keterangan:

• Anda bisa mengganti background imagenya (http://gubhugreyot-images.googlecode.com/files/gubhugreyot-scrollbox-transparency-effect.jpg) dengan background image lain.
• untuk merubah tinggi dan lebar scroll box lakukan perubahan pada max-height:300px; dan width:400px;. Jika tak diperlukan, kode width:400px; dapat dihilangkan!
• Scroll box dapat dipergunakan untuk kepentingan yang berbeda seperti misalnya sebagai box daftar posting.