Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 29 Juni 2010

Image Gallery With CSS3

Kategori : ,
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.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

12 Komentar untuk Image Gallery With CSS3

wuih, pertamax..
keren mas!

Wokey Sob......mantabz nie......berarti tipa posting mesti naro script class=box1 donk?

@Ferdinand >> benar sekali gan, kita harus menyisipkan class="box1" apabila ingin menampilkan efek ini...

Tutorial yg mnarik.....!!!

oke deh aku simpen dulu,,ntar aku praktekin. kayaknya asik nih buat seru2an.:D

@TUKANG CoLoNG >> bener gan css3 buat seru2an emang asyik bener dah....

wah benar benar keren nie

memang mantep...cuman ngabisin benwit.. hihihihi

ok sob,, saya coba dulu yach..

ngemeng-ngemeng tutorial ini mirip sama blogazine sebelah ya?

Mantabs nih postingannya, buat blog simple jadi lebih bagus nih

@Rudy Azhar >> hihihihihihi klo boleh tau blogazinenya alamatnya apa y?