26.2.14
16
Kumpulan Ragam Efek Pada Gambar - Menyisipkan gambar pada sebuah artikel sangatlah penting, karena dengan adanya gambar pada artikel akan sedikit memperjelas tujuan dan makna dari artikel tersebut, tetapi tidak banyak yang melakukan modifikasi pada gambar artikelnya sehingga artikel yang terkesan fresh terlihat mati karena gambarnya tidak memberi kesan kepada pembaca, tetapi jangan memuat gambar 18+ (gambar HOT) ya, ntar tidak nyambung dengan konten, hehe..

Kali ini, SAHABAT BLOGGER 77 sudah menyiapkan beberapa kode CSS yang dapat anda kelola sendiri nantinya, untuk menciptakan efek baru pada gambar dengan style anda. Jika sebelumnya saya sudah pernah share Efek Remote Link Pada Gambar, kali ini saya akan berikan Kumpulan Ragam Efek Pada Gambar yang dapat anda pilih untuk mempercantik tampilan gambar pada artikel anda nantinya.

*/
.imagecss3 .hover {-webkit-transition:all .5s ease-out;transition:all .5s ease-out;transform:translate(0px,-10px);tranparent transparent #ce35aF transparent;border:solid transparent whitecrome;}
design by.http://sahabatblogger77.blogspot.com/script_jscss3
author:devyindriyani
.image {no margin,no padding,no float}
.demoimage .hover {id=class;opacity:0.2;1;all}
/*

Kode diatas jangan di copy ya! karena tidak akan menghasilkan apa-apa, saya hanya menggunakan kode CSS diatas untuk memberi efek dengan berbagai ragam pada gambar dibawah ini.


efek gambar

EFEK BUMPING
.demo1 {-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;}
.demo1: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 gambar

EFEK FADE OUT
.demo2 {-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;}
.demo2:hover {opacity:0.2;}


efek gambar

EFEK FADE IN
.demo3 {-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;}
.demo3:hover {opacity:1;}


efek gambar

EFEK ROTASI
.demo4 {-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;}
.demo4:hover {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}


efek gambar

EFEK POINTER ZOOM
.demo5 {-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;}
.demo5: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);}


Image profile

EFEK FOTO CSS3
img.foto {background-color:#ffffff;border:0px;outline:none;padding:5px 5px 20px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);box-shadow:0 1px 3px rgba(0,0,0,0.7);}
img.foto:hover {-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}

EFEK CLEAR IMAGE
.efect {...}
.efect .hover {...}

Bagaimana? sudah menemukan ragam efek untuk gambar yang sesuai dihati anda? Tetapi pada efek foto CSS3 gambarnya jangan diambil ya, itu sudah ada yang punya, kalau kodenya silahkan dicopy bebas dan gratis, hehe.!

Saatnya menerapkan Kumpulan Ragam Efek Pada Gambar diatas pada blog
  1. Anda boleh taruh kode pilihan anda pada HTML template, letakkan diatas atau sebelum kode ]]></b:skin>, namun jika takut edit kode templatenya, cukup tambahkan kode :
  2.  <style design [[csstype="http://sahabatblogger77.blogspot.com"]]>KODE DISINI</style> 
  3. Kode-kode diatas sudah saya permudah susunannya menggunakan artribut ID(class="atribut gambar")dari angka 1,2 dan seterusnya, pada postingan cukup tambahkan kode class="kode atribut pilihan anda" mode HTML (bukan Compose)
    contoh misal pilihan anda efek bumping, maka kodenya akan seperti ini
    <style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
    .demo1 {-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;}
    .demo1: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);}
    </style>
    <div class="separator" style="clear: both; text-align: center;">
    <img class="demo1" src="URL gambar anda.jpg" /></div>
  4. Pada efek terakhir (efect clear image) value-nya masih kosong, silahkan anda tambahkan jika ada kode efek baru dari anda, saling berbagi kan pahalanya besar sob, saya tunggu kodenya dikolom komentar ya, hehe.!!
  5. Dan tidak lupa saya ucapkan terimakasih, semoga Kumpulan Ragam Efek Pada Gambar ini dapat bermanfaat. I Miss U guys.! emmm...muachh,,daaaaa...!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Kumpulan Ragam Efek Pada Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

16 komentar

  1. Wah lengkap banget nih keren keren lagi...
    Pertamaxnya saya bawa pulang ya :D

    BalasHapus
  2. Jadi unik kelihatan hasilnya, ijin mencoba buat pembelajaran Kami

    BalasHapus
  3. dengan memberi efek pada gambar maka postingan kita pun jadi lebih menarik..

    BalasHapus
  4. Kapan2 bisa di coba.saya simpan dulu script ny.trims

    BalasHapus
  5. Keren kalau ada gambar effect dari suatu blog, tapi saya masih sedikit bingung cara pemasanganya

    BalasHapus
    Balasan
    1. bingungnya dimana mas,
      jika tidak ingin menyimpan kodenya pada template,cukup tambahkan kode yang saya beri background orange pada pin 1, dan letakkan pada postingan mode HTML bukan compose,

      Hapus
  6. wah keren2 efeknya, thanks telah berbagi

    BalasHapus
  7. keren nih bro..nambah ilmu baru lagi..
    dulu taunya cuma efek yang nomor 3 aja

    BalasHapus
  8. keren2 mbak effect nya :)

    BalasHapus
  9. wow keren nih ini yang gw cari wahahaha....

    BalasHapus
  10. eee.. foto si cantik clara ada lagi di sini.. hampir lupa ambil kode cssnya/.. hehehe

    BalasHapus
    Balasan
    1. tengkyu.. kodenya..
      mumpung nda di baca ..hehehe.. senyumannya bikin lemes...ampyuun..my god...!

      Hapus
  11. ini yang ku cari

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK