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.

Artikel Lain:

flexbox20 Video Tutorial Belajar Flexbox CSS3 Untuk Desain Website responsive menu1001 Tutorial dan Contoh Menu Responsive Dengan CSS, Js & Jquery pupup css javascriptTutorial Cara Membuat Popup dengan CSS dan Javascript crop imageCara Crop Gambar dengan CSS animasi mengetik teks cssCara Membuat Animasi Efek Mengetik Teks dengan CSS tanpa Javascript sliding menu css htmlTutorial Cara Membuat Sliding Menu dengan CSS dan HTML efek salju html5Membuat Efek Salju dengan HTML5 Canvas dan Javascript Evento14 Template Bootstrap Gratis untuk Membuat Website Keren web design25 Alat Untuk Membuat Animasi Web CSS3, HTML5 & Javascript Animasi SVG taman bermain21 Contoh Animasi SVG Keren dan Interaktif + Scriptnya Superfluent Design13 Contoh Halaman About yang Keren dan Menginspirasi supermanMembuat Teks Vertikal dengan CSS