Contoh efek gambar keren dengan dengan CSS | CSS Blend modes dan filters memungkinkan kita membuat efek gambar yang sebelumnya tidak terbayangkan dengan bisa terjadi dengan CSS.

Saat menerapkan opsi baru pada gambar, Anda kini dapat membuat efek yang lebih mengesankan dengan menumpuk atau mengulangi bebeapa atribut dengan cara-cara cerdas, dilakukan dengan cara yang terlihat tanpa celah.

css image effect

Layaknya efek yang dibuat dengan photoshop, kita bisa membuat berbagai efek tersebut hanya dengan CSS. Satu gambar bisa dibuat menjadi bermacam efek.

Itulah yang dilakukan oleh Bennett Feely dari Pittsburgh, Pennsylvania dia membuat berbagai contoh efek yang bisa kita tiru dan gunakan dengan memanfaatkan CSS yang kemudian dijadikan sebuah library css bernama Image-Effects yang bisa didapatkan di Github.

Efek tersebut diantaranya

Airbrush

css-image-effect-airbrush

Emboss

css-image-effect-emboss image-effects-coloredpencil

Cara Menggunakan Efek

Untuk membuat gambar yang memiliki efek seperti itu, Anda hanya perlu untuk menyertakan CSS yang diberikan, lalu buat class sesuai dengan nama efek yang diinginkan. Sebagai contoh seperti ini

<div class="emboss-effect">
  <img width="" height="" src="photo.jpg" alt=""/>
</div>

Mudah sekali bukan, jika tertarik langsung saja kunjungi halaman Github nya, atau lihat dan dapatkan kode di halaman demo yang dibuat oleh Bennett Feely.