25 Oktober 2010

Image Gallery With CSS3

CSS3 lagi?? owh shit man.... oketrik.blogspot.com Asyik nih saya tulis lagi tentang css3 yang keren abis dah, kali ini css3-nya tentang Image Gallery. Sebenarnya trik css3 kali ini menggunakan efek hover yang apabila disentuh akan memperbesar atau berubah bentuk. Dari pada pusing baca penjelasan saya yang g jelas mendingan kita lihat demonya yuk.





css polaroid

css polaroid

css polaroid

css polaroid

css polaroid

css polaroid

css polaroid

css polaroid









Nah kode yang saya pakai untuk menampilkan image Gallery With CSS3 adalah sebagai berikut

Css yang di pakai :


.box {
z-index: 1;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}

.box:hover {
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}
nah untuk diatas adalah kode css-nya apabila sobat ingin memasang-nya di template sobat tinggal tambahkan saja kode tersebut di atas kode ]]></b:skin> dan simpan deh selesai namun efek tersebut tidak akan berfungsi apabila kode css tersebut tidak di panggil. Jadi untuk memanggilnya kita gunakan class="box1" pada HTML, contoh seperti di bawah ini

<div class="box1">
<img src="Alamat-Gambar-Sobat" />
</div>

nah kurang lebih seperti itu, biar jelas silahkan sobat coba jadi jangan cuman baca saja nanti malah g bisa, oiya kalau sobat ingin mempelajari lengkap tentang css3 sobat bisa kunjungin css.info . Sekarang tugas saua selesai, dan saya mau pamit kurang lebihnya di maafkan y. Terima kasih dan Salam OT oketrik.blogspot.com.

Artikel Terkait di Bawah posting
Blogger

Diposting oleh KD JON'S di 23.44

Label: , , ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

LOGIN

Template by : JON'S