Dengan desain ini maka gambar yang berukuran sebesar apapun hanya akan ditampilkan dalam ukuran lebar (width) sebesar 100px. Tinggi akan secara otomatis menyesuaikan diri dengan perbandingan sama terhadap gambar/image yang digunakan. Skala pembesaran gambar di atur sebesar 2.5x gambar yang tertampilkan. Sampeyan bisa memperkirakan sendiri jika lebar berukuran 100px, keika pembesaran dilakukan dengan perbandingan 2.5x, maka gambar berubah menjadi sebesar apa. Atau jika sampeyan lagi pusing hingga tambah pening lagi untuk membayangkan hal ini, silahkan nanti lihat demo-nya.
Desain Animated Image Enlarge sama sekali tanpa bantuan sebuah script pun, oleh karena itu hanya akan berfungsi secara sempurna di browser selain Internet Explorer (IE). Memang kode yang dipergunakan hanya diperuntukkan bagi Mozilla, Opera, Safari dan Google Chrome, oleh karena itu jika ada yang menggunakan browser selain tersebut di atas (yang CSS-nya tidak kompatibel), bisa juga menambahkan kode CSS baru untuk meningkatkan kompabilitasnya.
Dalam desain, digunakan juga kode CSS "Unordered List" (ul) dan "List Item" (li) dengan tujuan supaya gambar yang ditampilkan tidak mengalami perubahan posisi ketika salah satu gambar mengalami proses perbesaran saat tersentuh cursor. Dengan cara seperti ini seluruh bagian blog sama sekali tidak akan terganggu (mengalami pergeseran) dan blog tetap enak di nikmati.
Untuk menciptakan lebih dari satu bentuk animasi, telah disertakan 4 (empat) macam animasi yang menyertai perbesaran gambar. Sampeyan dapat menggunakannya hanya dengan menambahkan "class" pada list item (li) untuk menciptakan animasi yang berbeda di setiap gambar. Supaya perbesaran gambar tetap terjadi di bagian (ruang) yang ada, kita harus jeli untuk menentukan posisi gambar berkaitan dengan animasi yang telah tersedia. Jika menginginkan perubahan animasi pada skala (scale), posisi (translate) dan rotasi (rotate), silahkan lakukan perubahan pada nilai yang digunakan pada variabel di atas (scale=ukuran, translate=posisi kanan dan kiri, rotate=sudut putar). Sebagai bahan pertimbangan, sekali lagi untuk melakukan percobaan-percobaan terhadap desain-desain baru, sebaiknya sampeyan buat sebuah blog khusus percobaan, sehingga ketika desain baru digunakan diblog aktif, maka semua sudah dalam bentuk siap pakai dan telah di uji coba.
Kode CSS "CSS3 Animated Image Enlarge"
.GRenlarge{list-style-type: none;margin: 0;padding: 0;}
.GRenlarge li, .GRenlarge li.anim1, .GRenlarge li.anim2, .GRenlarge li.anim3 {display: inline;
width: 110px;}
.GRenlarge li img, .GRenlarge li.anim1 img, .GRenlarge li.anim2 img, .GRenlarge li.anim3 img {
width: 100px; float: left;
border: 4px solid #996600;
margin: 5px;
opacity: 0.6;
background: #888;
padding: 2px;
z-index: 100;
cursor: pointer;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-moz-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-webkit-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
}
.GRenlarge li img:hover {
-moz-transform: scale(2.8);
-webkit-transform: scale(2.8);
-o-transform: scale(2.8);
opacity: 1.0;
background: #999;
border-color: #fff;
}
.GRenlarge li.anim1 img:hover {
-moz-transform: scale(2.8) rotate(720deg);
-webkit-transform: scale(2.8) rotate(720deg);
-o-transform: scale(2.8) rotate(720deg);
}
.GRenlarge li.anim2 img:hover {
-moz-transform: scale(2.8) rotate(0deg) translate(50px);
-webkit-transform: scale(2.8) rotate(0deg) translate(50px);
-o-transform: scale(2.8) rotate(0deg) translate(50px);
}
.GRenlarge li.anim3 img:hover {
-moz-transform: scale(2.5) rotate(30deg) translate(50px);
-webkit-transform: scale(2.5) rotate(30deg) translate(50px);
-o-transform: scale(2.5) rotate(30deg) translate(50px);
}
]]></b:skin>Cara Menyimpan Kode CSS
- Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
- Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
- Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
- Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.
Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS di atas.- KLIK SAVE Template (Simpan Template).
xHTML CSS3 Animated Image Enlarge
<ul class="GRenlarge">
<li><img src="http://img.theomegaproject.org/thumbs/2010/04/271.jpg" /></li>
<li class="anim1"><img src="http://img.theomegaproject.org/thumbs/2010/04/252.jpg" title="" /></li>
<li class="anim2"><img src="http://img.theomegaproject.org/thumbs/2010/04/100.jpg" title=""></li>
<li class="anim3"><img src="http://img.theomegaproject.org/thumbs/2010/04/128.jpg" title="" /></li>
</ul>
Kode HTML di atas sudah dilengkapi dengan gambar. Silahkan gunakan sebagai bahan percobaan. Masing-masing menggunakan bentuk animasi yang berbeda. Sampeyan bisa gunakan ke-4 animasi sekaligus ataupun mungkin hanya 1 atau dua macam animasi. Kode HTML bisa digunakan untuk posting ataupun disimpan melalui penambahan widget (Add Gadget di Elemen Laman). Apabila akan digunakan sebagai bentuk image gallery, sampeyan bisa tambahkan box dengan memanfaatkan kode "DIV".
Bagaimana bentuk, tampilan serta animasi yang tercipta melalui CSS3 Animated Image Enlarge, silahkan
KLIK link di bawah ini.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
� Happy Blogging - gubhugreyot �
