Beberapa Tutorial Efek Transisi Pada Gambar
Selasa, 25 Februari 2014
0
komentar
Sample Efek Bumping :
Berikut Kodenya :
.post img{
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.post img:hover{
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(0px,-10px);
-o-transform:translate(0px,10px);
transform:translate(0px,-10px);
}
Sample Efek Fade Out :
Berikut Kodenya :
.post img{
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
}
.post img:hover{
opacity:0.2;
}
Sample Efek Fade In :
Berikut Kodenya :
.post img{
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
opacity:0.2;
}
.post img:hover{
opacity:1;
}
Sample Efek Rotasi :
Berikut Kodenya :
.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Sample Efek Hover Zoom :
Berikut Kodenya :
.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover{
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-ms-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}
Sample Zoom Out :
Berikut Kodenya :
.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{
-o-transform: scale(0.6);
-webkit-transform: scale(0.6);
}
Sample Miring Kekanan :
Berikut Kodenya :
.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); -o-transform:rotate(4deg);
}
Sample Miring Kekiri :
Berikut Kodenya :
.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}
Sample Efek Skew :
Berikut Kodenya :
.post img{
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.post img:hover{-webkit-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}
Sample Gambar kekanan :
Berikut Kodenya :
.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{
-moz-transform:translate(5em, 0pt);-webkit-transform:translate(5em, 0pt);
}
Sample Gambar Memutar :
Berikut Kodenya :
.post img{
border: 3px solid #D8D8D8;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}
.post img:hover{
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}
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 dan sip dong.
Cukup mudah dong sob. Bila ada yang salah pada artikel diatas maka segera anda tulis di kotak komentar di bawah ! terimakasih atas perhatiannya.
Demikian ulasan seputar Beberapa Tutorial Efek Transisi Pada Gambar
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Beberapa Tutorial Efek Transisi Pada Gambar
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2014/02/beberapa-tutorial-efek-transisi-pada.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
0 komentar:
Posting Komentar