BLOGCUNAYZ - Hallo sobat apa kabarnih,,?? di tahun 2012 ini saya akan share Beberapa Eefek Transisi Pada Gambar. Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja lah gak usah mundar mandir lagi cekendol,,
Nih ane kasih beberapa efeknya :
Efek Bumping
 |
.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);
}
|
Efek Fade Out
|
.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;
}
|
Efek Fade In
|
.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;
}
|
Efek Rotasi
|
.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);
}
|
Efek Membesar
|
.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);
}
|
Efek Skew
|
.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);
}
|
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,,?? yaudah jika ada yang mau kasih tambahan silahkan,,..
Title : Beberapa Efek Transisi Pada Gambar
URL : http://blogcunayz.blogspot.com/2012/01/beberapa-eefek-transisi-pada-gambar_01.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link
Beberapa Efek Transisi Pada Gambar sebagai Sumbernya.
keren2 sob efeknya,, =)) btw ane pertamax gak ya,, =))
ReplyDeleteHeebaaaTtt...! yg terakhr blm prnh coba hehehe
ReplyDelete@ Rama88 : thank sob,,wkwkwk =)) =)) iyo selamat sob :))
ReplyDelete@ Putra Tenzhung : weew asyik di bilang hebat sama master wkwkwk,,oh yang efek miring ya sob,, =))
anjirrr gagal pertamax lagi euy...
ReplyDeleteEfek Rotasi nya kok cuman efek hover doang gan.
*pergi ke alam mimpi ahh byee (jangan lupa gehunya sob)
@ Ф дфѕдғфдғ Ф : wkwkwk mungkin lain kali sob,ok sip ane juga mau tidur nih
ReplyDeletekeren banget tuh yang skewnya heheheh mantap
ReplyDeletekayak gimana ya itu :D lucu dehhhh!
mantap gan
ReplyDelete@ Farixsantips : wkwkwk kaya mau kabor ya gambarnya =)) =))
ReplyDelete@ SYSTEM OF BLOG : thank gan
keren gan...nice tipsnya..:)
ReplyDeleteBanyak kodenya.
ReplyDeleteIkutan belajar di sini gan.
Selamat tahun baru 2012 gan ya
wah, keren efek transisi webkitnye.....
ReplyDeletelengkap.....
ane Bookmark dolo ya sob.....
nice 4 share...
saya pake yang fade out =))
ReplyDelete@ Ageboy Blogs : thank gan :)
ReplyDelete@ Obat Sakit 2011 : silahkan gan,Selamat tahun baru 2012 juga
@ zaenal blog : silahkan sob
@ DODE-XP.COM : sama saya juga pake yang itu :))
ada efek2nya kueyen2..
ReplyDeletewow blog tutorial yang kere.. tidak salah masuk ane kemari, hehehehe
ReplyDeletemasih kurang atu tu gan. tambah lagi yang ditunjuk gambar langsung pecah. ane perneh lihat keren deh.. coba di share caranya pasti banyak yang demen.hehehe
thanks. happy blogging
@ awelqq : maksudnya sob,,?? gak ngerti ane =)) =))
ReplyDelete@ Wisata Murah : thank sob,wah kalo itu ane belon belajar tuh wkwkwk,tar ane tapa dulu deh =)) =)),,happy blogging juga
update tak bilang bilang nih sobat :) ehyehe
ReplyDeleteYahh Gagal pertamax dehh... Mampir balik ya sob... Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
ReplyDelete@ Farixsan Quilicuor (Faris Hardiyanto 177) : wah ente amnesia ris kan gw dah share di group pus ente kan dah komen di atas =))
ReplyDelete@ Black Angel Syndicate : lain kali mungkin sob wkwkwk,,siap2,,
mantap Om ijin coba ya :))
ReplyDeleteBookmark lagi Sob...Thanks for share and happy blogging
ReplyDeletebagus-bagus yak efeknya ane simpen dulu yo. ngomong-ngomong taro cssnya nya dimana gan.. n ada kode tambahan lagi gak buat fotonya.
ReplyDeletekeren sob efeknya apalagi yang skew
ReplyDelete@ Lord Chilight : silahkan sob
ReplyDelete@ Iskaruji dot com : seept lah sob wkwkwk =)) happpy blogging juga
@ Fazri : oh iya lupa gan tar saya edit lagi postingannya :)
ReplyDelete@ binkbenk : thank sob
Mantap sob., lengkap banget..! *smile
ReplyDeletekeren sob...
ReplyDeleteditunggu komentar baliknya?
keren........saya coba ah...........
ReplyDeletebisa dicoba nih sobat, tapi radh malas nih bongkar kode html blog, kodenya sy save aja dulu sob... mohon ijin nih sob...
ReplyDeleteAlhamdulillah kabar sae master.Btw saya gagal maning pertama dah di serang sama master Rama hehehee.Keren tutornya, saya baca lagi nih soalnya rada bingung:D
ReplyDeleteHUaaaaaaa...komplit nih sob, sama kayak putra:yang terakhir belum pernah coba..mending ane bookmark dl nih postingan buat ntr praktek..hehehe.. oke2 makasih sob
ReplyDeleteiya lucu banget hehehehe :D coba sampe tipis banget trus pake translate kabur dah!
ReplyDelete:D wah keren sob..
ReplyDeletejadi pengen mncoba nih..
wkwkwk mantepp sobb , ane paling suka efek yg Fade" hahay , sorry harang mampir nih
ReplyDeletebtw kok ni muncul scroll bawah ya ??
ReplyDeleteWow keren sob,,langsung dicoba
ReplyDeleteWaduh kaga pertamax yaudeh pertaminax ja hehe. praktekin ah sekarang :D
ReplyDeletekeren sob, ane simpen dulu ah, biyar gak lupa hhe
ReplyDeleteMantab sobat... Mampir balik blog ane ya sob...
ReplyDeleteAda Postingan nhe Comment ya... Thx
Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
@ Rohis Facebook : thank sob,,... kalo mau pake emoticon seperti biasa gak usah pake kata smile :)
ReplyDelete@ DHENYSHARE : thank sob,seep lah
@ IT-Soft Center : silahkan sob
@ Asis Sugianto : silahkan sob yang penting happy =)) =))
@ Bisnis Online Blog : wkwkwk Alhamdulillah yah =)),,next time kali sob
ReplyDelete@ AgusLho : silahkan sob di ctrl+d :),sama2 sob
@ Farixsan Quilicuor (Faris Hardiyanto 177) : hahah au ah gelap =)) =))
@ Galau'ers : silahkan di coba sob
@ Asmara Susanto : oh gitu ya sob tar ane edit2 lagi dah =)) thank for masukannya
ReplyDelete@ Mbah Qopet : hahah harang,,?? jarang kali mbah,,scroll ke bawah ningendi mbah,,??
@ Ultrabook Notebook Tipis Harga Murah Terbaik : silahkan sob :)
@ Deganshah Putra : hahah =)) ada2 aja si masbro mah,,silahkan mas
@ Aldio : silahkan sob :)
ReplyDelete@ Black Angel Syndicate : siap sob langsung ke TKP
persempaaaaaaaaaaaxxxxxxxxxxxxxxxxxxxxxxx
ReplyDeletekeren bgt masbro :)
praktekin ah :D
wao keren ane mau coba yang fade in aja dach sob
ReplyDelete@ Dayz : thank masbro,silahkan di praktekin
ReplyDelete@ WahidBlog : silahkan sob
Bagus sobat efeknya...perlu nanti lain kali tak coba tipsnya.
ReplyDeleteTerima kasih
absen pagi aja dolo, efek bumping udah ane teraoin sobatku
ReplyDeleteane paling suka yang fade in dan fade out :)
ReplyDelete@ cardiacku : trimakasih sobat,silahkan :)
ReplyDelete@ WahidBlog : thank sob atas kunjungannya,,weh ajib tar ane maen ke tempat ente
@ Musa Khairul Umam : sama ane juga sob,,sob kok gak online di fb,,??
ReplyDeletemampir lagi sobat sembari menyimak beberapa efek transisi dari sobat serta menantikan update terbaru dari sobat...
ReplyDeleteKeren gan.. lanjutkan... :D
ReplyDeletedengan permainan efek CSS ini memang blog jadi tampil beda. met pagi sob. salam
ReplyDeletewow ane datang lagi mau nangkap burung burung itu ga kena kena sob, hehe keren
@ Asis Sugianto : silahkan sobat,trimakasih atas kunjungannay
ReplyDelete@ Dadang herdiana : thank gan,siap lah :)
@ Wisata Murah : yup betul3X,wkwkwk =)) =)) coba pake jaring sob
Keren sangat,ijin ane coba kawan.Kau memang biang CSS nieh.Makasih ya,happy blogging.
ReplyDelete@ Raihan Mar'ie Ramadhan : thank,silahkan kawan,wkwkwk bisa aja nih masbro,sama2,happy blogging juga :)
ReplyDeletekunjungan di sini,,,
ReplyDeletepada keren2 semua ni blognya,,,
tutorialnya jg mantapp sob :)
mampir lagi ahh,, =)) ehh itu ada kelelawarnya,, =))
ReplyDeleteWahh, keren transisi imagenya
ReplyDeletetapi klo ane pasang di blog ane,kayaknya gak Cocob sob
css3 trantition keren-2 ya :)
ReplyDeleteWahh, tricknya Succes udah ane pasang
ReplyDeleteKeren banget mas, ini dia yang saya tunggu-tunggu. Dari kemarin cari efek Zoom gambar ga dapet-dapet mas. Makasih banget sudah share. Mudah-mudahan ga berat kode CSS nya.
ReplyDeleteOh ya met tahun baru ya mas. Salam Hormat Kami
wah sob..
ReplyDeleteklo ada waktu semua post dsini djadiin e-book :D
biar bsa jadi tutorial offline :p
wah bagus baget ya eefek transisinya, jadi ingin mencoba... :)
ReplyDeletehyah.. saya cuma bisa manggut2 aja gan..
ReplyDeletewehehe..
support aja dah dsni yaa...
selamat tahun baru..
dan ditunggu kunjungan baliknya ya
salam persahabatan
happy blogging :)
@ hamparan : thank sob :)
ReplyDelete@ Rama88 : iyo biar kesan sorenya dapet sob
@ MHARJIPES.COM : kenapa gak cocok sob,,?? kan tampilannya gak berubah
@ Dhani : thank gan
ReplyDelete@ MHARJIPES.COM : wkwkwk alhamdulillah yah =)) =))
@ HONDA CENTER : wah kebetulan banget ya kalau begitu :),,selamat tahun baru juga
@ Si Galau : boleh juga tuh sarannya cuma kayaknya agak ribet sob :)
ReplyDelete@ anisayu : thank gan,silahkan di coba :0
@ Outbound Malang : oh gitu ya sob,,ok thank untuk supportnya,siap laksanakan sob,salam juga,and happy blogging juga
bisa mengot2 gitu keren sob.. :D
ReplyDeleteJalan-Jalan Lagi... Mampir balik blog ane ya sob... Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
ReplyDelete@ awelqq : wkwkwk kaya anak2 dugem aja =)) =))
ReplyDelete@ Black Angel Syndicate : seep
keren nih sob ...
ReplyDeletemau nyoba yg Skew aaah ....
btw pa kabar sob ???
@ Shinobi Cafe : thank sob,silahkan di coba sob,alhamdulillah baik sob,ete sendiri apa kabar,,?? jarang keliatan sekarang
ReplyDeletewah keren nih, oh iya sob, link blog anda telah kupasang di blogroll pasang balik ya sob...
ReplyDelete#semoga dengan di pasanganya link pada blogroll akan menambah hubungan silaturahmi kita. hehe...
Wah pertamax gan, nice share :)
ReplyDelete@ mania-xp : ok seep lah sob,tapi lain kali pesannya di page linkexchange ya :),,,amien
ReplyDelete@ Adie Konoe Poetra Dyanaz : wkwkwk pertamax artinya pertama gan,,,=)) =)) ,,thank
ikut meramaikan di blog sobat :D
ReplyDelete@ Aldio Blog Trimakasih sobat sudah berkenan meramaikan :)
ReplyDeletenang irungku kiye :P =)) , wkowkwokwo maho maho
ReplyDelete@ Mbah Qopet : hahaha =)) =)) teing ah te ngarti abi mah,,, pokokna mah si mbah teh sang maho =))
ReplyDeletewah keren nie sob, backgroundnya juga keren banget naruto n pain.
ReplyDeletemantap
wah, komplit nih efek"nya,, mantep juga. ^^
ReplyDeletemakin keren ajha nigh blognya
ReplyDelete@ Liandri eko : thank sob,wkwkwk thank lagi abis ane sekarang lagi suka naruto nih =))
ReplyDelete@ Share Our Knowledge : thank sob
@ Namaku Mharjipes : trimakasih sobat :)
Wah.. mantap gan info'nya,.. ane bru tau skrang.. !!
ReplyDeleteizin coba gan.. ! :)
Kagak ada demonya ya?
ReplyDeleteBtw tampilan blognya mantabs gan. :D
Datang menagih cendol hehe
ReplyDeleteTrims gan bermanfaat ini.
ReplyDeleteane coba sob,,keren ni kayaknya
ReplyDeleteloadnya jadi tambah lama ga ya sob
ReplyDeletehadir lagi di sini sob,,
ReplyDeletebaca2 tutorial :)
menarik sekali sob..........
ReplyDeletekembali berkunjung gan :)
ReplyDeleteJalan-Jalan Lagi sobat... Mampir balik ya sob... Maaf jika saya ada salah... :)
ReplyDeletekeren-keren efeknya.. hohoo
ReplyDeletethanks share nya ya mas.. :)
keren, saya udah pake efek bumping di blog saya,,,
ReplyDeletesaya datang lagi gan :)
ReplyDelete@ tagantar : silahkan gan
ReplyDelete@ Algo wijaya : itu kan gambarnya langsung sekaligus demonya gan :) coba di sorot,,thank gan
@ Deganshah Putra : wkwkwk tar ane mampir untuk bagi2
@ Obat Sakit 2011 : sama2 gan,syukur bila artikel saya dapat bermanfaat untuk sobat
ReplyDelete@ >>> Ichwan HAUSGAME : silahkan di coba sob,insya allah gak kok :)
@ hamparan : trimakasih atas kunjungannya,silahkan di baca sob
@ DHENYSHARE : thank sob,,
ReplyDelete@ Rohis Facebook : thank sob atas kunjungannya
@ Black Angel Syndicate : tuh kan jadi marah si masbro mah,,santai aja lagi mas :)
@ Diskusi Blogger Pemula : thank mas hohoho juga wkwkwk,,sama2 :)
ReplyDelete@ Windows 7 blog : wew gimana kren gak sob,,?? wkwkwk =))
@ Rohis Facebook : thank sob sudah meramaikan suasana :)
sokk atuhh sampeyan sih Maho :P
ReplyDeletemakin keren disini sob..mantap..
ReplyDeletePena hadir dan absen pagi sobat setelah sekian lama offline neh...
ReplyDeleteKeren sob efeknya..sipplah
Kunjungan kembali sobat sambil nunggu postingan selanjutnya
ReplyDeleteabsen dulu ahh...
ReplyDeleteefek gambar transisinya keren,
ReplyDeletemasih ane bookmark sob...
blom sempet raktek nih...
thanks sob,
nice share....
sipp deh, makin kreatif dgn transisi, dan dikembangan dgn hover pada img.. hohohoho
ReplyDeletesip sipp, makasih triknya ^^
@ Mbah Qopet : opo koe,,?? ora budeng ane =)) =))
ReplyDelete@ Ageboy : thank sob,,
@ tautanpena : iya neh sekarang jalang mampir,,thank sob
woow mantapss btw backgroundnya terlalu berat nih sob
ReplyDelete@ randy oktaran : thank sob,iya saya pusing cari backgroundnya :D
ReplyDeletekeren sob, btw yang efek rotasi perasaan saya saja atau memang demo efeknya ga jalan ???
ReplyDelete@ Friski Gatra : wah kemarin jalan gan,kok sekarang gak ya,,?? aneh banget
ReplyDeleteWah, keren gan, nyobain ach..
ReplyDelete@ chelonia : thank gan,silahkan di coba :)
ReplyDeleteKunjungan pagi untuk sahabat untuk menimba ilmu di blog profesional.
ReplyDelete@ Bagus Sugiarto : trimakasih untuk kunjungannya sobat,ajib di bilang profesional =))
ReplyDeleteTrim's infonya & jgn lupa berkunjung balik ke blog saya
ReplyDelete@ Junaedi : sama2 gan,siap langsung ke TKP
ReplyDeletekeren gan, nyobain dulu ach
ReplyDelete@ Tutorial Blog : silahkan gan di coba,semoga dapat bermanfaat
ReplyDelete(new be neh )wezzzz.. cool bnget Boz.. sya coba N mantab.. hebat 10x
ReplyDeletedah di coba smuanya.. N Akitived smua..hehehe..keren..trimz broo
ReplyDelete@ capoeng : wkwkwk thank boz
ReplyDeletethanks gan.. :)
ReplyDelete@ Alam Perwira : sama-sama gan,trimakasih atas kunjungannya
ReplyDeletewah pusing nih gan,blm pernah nyoba ana
ReplyDelete@ cibaduyut bandung : pusing kumaha kang ? cobian prakteken hela :)
ReplyDeleteKeren Sob efeknya
ReplyDelete#thank's
Nice info .. :)
ReplyDeleteKunjungi balik blogku ya .. ^^
@ Torayasurabaya : sama2 sob
ReplyDelete@ mY c0lLecTi0n : siap pasti gan :)
mampir kesini mas bro...mksh tutorialnya,,,
ReplyDeleteMaf OOT. Aq mw tanya?
ReplyDeleteMas blog aq kq ndak bisa dikasih breadcrumbs ya.......?
Tolong bantuannya ya.......?
Assalamualaikum Bismillah Alhamdulillah | Blogwalking mas sambil menanti postingan terbaru mas....? kunjungi balik ya...? | Alhamdulillah Wassalamualaikum.
ReplyDeletehatur nuhun.....mantaaaap.
ReplyDeleteini yang di cari !!
keren kang efeknya :O
ReplyDeletesalam kenal yah kang :D
Nice
ReplyDeletemakasih udah share infonya
ReplyDeletecara manggilnya gimana?
ReplyDeletethanks infonya :)
ReplyDeleteMantap...!!!
ReplyDelete[blockquote]Wah Salam kenal... Sangat bermanfaat sekali Artikel ini.
ReplyDeleteMembuatku g habis berfikir, gimana cara memberi efek tersebut pada gambar tertentu saja, bukan semuanya... ?[/blockquote]