Membuat efek gambar dengan css

CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list, kita juga bisa gunakan untuk mengatur tampilan gambar. Berikut ini beberapa penerapan efek css pada gambar.

Kali ini saya berbagi tentang bagaimana memberikan efek pada gambar dengan css. Saya sudah siapkan contoh yaitu :

Efek Glow

Efek css pada gambarefek csscss effect

Untuk memberikan efek glow/bercahaya pada area luar gambar kita bisa gunakan kode css berikut :

#contoh1 {
    width: 600px;
    margin: 0 auto;
}
#contoh1 img {
    margin: 25px;
    border: 10px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#contoh1 img:hover { 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Efek Goyang

glow cssshadow cssborder image

Untuk memberikan efek bergoyang pada gambar kita bisa gunakan kode css berikut :

#contoh2 {
    width: 600px;
    margin: 0 auto;
}
 
#contoh2 img {
    margin: 30px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
#contoh2 img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Efek transparan

css transparancss tembus pandangcss menarik

Untuk memberikan efek transparan pada gambar kita bisa gunakan kode css berikut :

#contoh3 {
    width: 600px;
    margin: 0 auto;
}
#contoh3 img {
    margin: 25px;
    border: 10px solid #eee;
    opacity:0.5;
}
#contoh3 img:hover { 
    opacity:1;
}

Lihat demo efek gambar

Jika anda ingin menerapkannya di blogger, anda bisa baca artikel Membuat efek gambar di blog dengan css

Semoga bermanfaat, jangan sungkan untuk memberi masukan atau pertanyaan.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
  • Membuat tulisan ditengah
    Panduan lengkap cara membuat tulisan/objek di posisi tengah halaman dengan HTML/css
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form
  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.
  • Membuat efek kotak tulisan dengan css
    Panduan Cara Membuat efek kotak tulisan dengan css

Kiriman terbaru