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 **

Artikel Lainnya

  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Membuat efek gambar di blog dengan css
    CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit

Kiriman terbaru