Beberapa Efek Transisi Pada Gambar With CSS Vol.2 Official Site

Baiklah kali saya akan mencoba memberikan "Beberapa Efek Transisi Pada Gambar With CSS Vol.2". Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,tapi sebelumnya saya juga pernah membahas 'Beberapa Efek Transisi Pada Gambar dengan CSS' info info lebih lanjut bisa dilihat disana. OK kita langsung saja lah gak usah mundar mandir lagi cekendol,,hehee..

- Sample Gambar Berputar (Rolling) :

Kode CSS :

.post img{
width:220px;height:190px;
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
}
.post img:hover{
margin-left:300px;
-webkit-border-radius:40px 40px;
-moz-border-radius:40px 40px;
-o-border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}

- Sample Gambar Menghilang With (Rolling) :

Kode CSS :

.post img{
width:220px;height:190px;
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
}
.post img:hover{
margin-left:300px;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";
filter: alpha(opacity=6);
-webkit-border-radius:40px 40px;
-moz-border-radius:40px 40px;
-o-border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}

- Sample Gambar Berjalan :

Kode CSS :

.post img{
width:220px;height:190px;
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
}
.post img:hover{
margin-left:300px;
-moz-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
text-align:center;
}

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :

1. Masuk Dasboard >> Template >> Edit HTML
2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ( Ctrl+F )
3. Letakan salah satu kode CSS efek transisi di atas kode no 2
4. Save and done ^_^

Gimana bagus gak,,?? gak ya,,?? ya udah jika ada yang mau kasih tambahan silahkan,,..
Semoga tutorial ini membantu.

Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...

ping fast my blog, website, or RSS feed for Freegoogle pagerank

Ping your blog, website, or RSS feed for Free

Please rate this article:

{[['

', '

']]}

{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

<a href="http://ut2a-4down.blogspot.com/2012/03/beberapa-efek-transisi-pada-gambar-with.html">Beberapa Efek Transisi Pada Gambar With CSS Vol.2</a>

0 Comments

Comments

+ komentar + 0 Diskusi pada 'Beberapa Efek Transisi Pada Gambar With CSS Vol.2'

Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^