Elastic Box Using Css3

Copy dan pastekan kode CSS di bawah ini tepat di atas ]]></b:skin>, kemudian klik "SAVE Templates (Simpan Template)".

.GRrelative {
       float: left; 
       position: relative;
       width: 170px;
       height: 200px;
       margin: 0 10px 5px 0;
}
.GRabsolute {
       top: 0; left: 0; position: absolute;
       width: 150px; /* original code by: http://Fornothink.blogspot.com */
       height: 188px;
       background: rgba(0,0,0, 0.1);
       border: 2px solid #999999;
       border-radius: 6px;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px; 
       border-top-left-radius: 12px; border-bottom-right-radius: 12px;
       -moz-border-radius-topleft: 12px; -moz-border-radius-bottomright: 12px;
       -webkit-border-top-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; 
       overflow-x: hidden;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 9px;
       padding: 8px 8px 15px;
       overflow: hidden;
       -o-transition: all 0.9s ease-out;
       -moz-transition: all 0.6s ease-out;
       -webkit-transition: all 0.9s ease-out; 
}
.GRabsolute:hover {
       width: 400px; 
       height: 300px;
       color: #eee;
       text-shadow: 1px 1px 1px #000; 
       background: #666666;
       font-size: 14px;
       overflow: auto; 
}
.GRabsolute img {
       float: left;
       margin: 0 10px 5px 0;
       border: 2px solid #888;
       border-radius: 8px;
       -moz-border-radius: 8px;
       -webkit-border-radius: 8px;  
       box-shadow: 1px 1px 10px #fff;
       -moz-box-shadow: 1px 1px 10px #fff;
       -webkit-box-shadow: 1px 1px 10px #fff;
       width: 70px;
       height: auto; 
}
.GRabsolute:hover img {
        width: 170px; 
}

Elastic Box dapat digunakan di posting atau di widget. Box spesial ini berupaya memaksimalkan penggunaan beberapa kode CSS3 seperti drop shadow (box shadow), border radius, text shadow dan tentu saja CSS3 transition yang merupakan "nyawa bagi Elastic Box". Dengan kemampuannya yang "cukup aduhai", diharapkan Elastic box mampu membuat posting "lebih seronok" (he ... he ...) sekaligus bisa dimanfaatkan untuk memuat bagian posting yang "bersifat khusus". Apa pengaruhnya terhadap blog? He ... he ... Yah ..., Elastic Box tak ubahnya "sebuah gincu (lipstick, mbul! masa' gincu saja nggak ngerti!) bagi seorang wanita! Sedikit polesan akan membuat nafas lelaki ngos-ngosan! (he ... he ... nafas ku, broer. bukan nafas sampeyan! klo sampeyan nggak ngos-ngosan tapi justru nafas jadi "senin-kamis" he ... he ...).



Elastic Box didesain dengan menggunakan ukuran lebar 170px dan tinggi 200px. Gambar/image dalam box dibuat dalam ukuran lebar 70px dan ketika box bertambah besar gambar akan berubah berukuran lebar 170px dengan tinggi berbanding lurus dengan skala gambar sebenarnya (gambar orisinil-nya). Box-nya sendiri ketika tersentuh cursor akan bertambah besar dengan ukuran lebar 400px dan tinggi 300px. Untuk menjaga apabila isi box cukup melimpah (banyak), maka box kita lengkapi dengan sebuah scroller dalam arah vertical. Sampeyan dapat memuat banyak hal di dalam box spesial ini. Mo gambar, mo teks, mo link atau bentuk yang lain boleh-boleh saja.

• Masukkan link image (gambar) di bagian depan kemudian di susul dengan teks atau teks link.
• Sebenarnya bisa juga untuk menggunakan 2 (dua) gambar atau lebih dengan cara setiap perpindahan dari gambar yang di ikuti teks diberikan spasi.
• Ukuran bisa dilakukan perubahan untuk disesuaikan dengan lebar ruang yang tersedia dengan merubah nilai width pada box dan jika diperlukan termasuk ukuran gambar. (perubahan terutama pada syntax hover-nya).

/*  Gunakan kode Html di bawah ini setiap kali ingin menampilkan effect seperti diatas */
<div class="GRrelative"><div class="GRabsolute"><img src="images.jpg" /> Tuliskan teks di sini! (setelah gambar). Sampeyan dapat juga masukkan link yang berbentuk teks di sini!</div></div>Tuliskan artikel atau posting di luar yang akan di masukkan box di sini!

Di Baca Juga Ya...Artikel Terkait Lainnya :

Widget By : lefransnote's Site