Tutorial Adjustment Image dengan CSS Filter Effects (Source Code)

Tutorial Adjustment Image dengan CSS Filter Effects-Teknik adjusting image seperti Brightness dan Contrast dan merubah gambar menjadi Grayscale atau sephia adalah hal umum yang biasa di temukan pada aplikasi editing foto seperti photoshop dan photoscape. Tapi sekarang, sangat lah mungkin untuk membuat efek yang sama menggunakan CSS, caranya adalah dengan menggunakan Filter Effects dari CSS.
Apa itu Filter Effects? Filter Effects adalah sebuah pengolahan dengan cara merender sebuah element sebelum ditampilkan dalam sebuah dokumen, contohnya bisa seperti Blurring, merubah intensitas warna bahkan melengkungkan warna.
Terdengar menarik bukan? Karena itu pada artikel ini saya akan mencoba mengaplikasikannya
Ok, so what we need?

Pertama foto sebagai objek percobaan

Kedua jika kita sudah memiliki objek foto percobaan, saatnya untuk mengaplikasikannya
saya akan coba efek Grayscale 


img {
        -webkit-filter: grayscale(100%);
         }

kemudian efek Sepia ala Instagram


img {
        -webkit-filter: sepia(100%);
        }

Percentage maksimal Grayscale dan Sepia adalah 100% , jika di set 0 % maka tidak akan terjadi perubahan.

Brightness

img {
        -webkit-filter: brightness(200%);
         }

Contrast

img {
       -webkit-filter: contrast(200%);
         }

contrast sengaja saya set 200% karena jika valuenya dimulai dari 100% maka tidak akan terjadi perubahan.

Gaussian Blur

img {
        -webkit-filter: blur(10px);
          }

Bagaimana? Sudah seperti aplikasi editing foto yang biasa kita lihat kan?

ok semoga tutorial ini dapat bermanfaat.

Download

Share on Google Plus

About kodekidi

KodeKidi.com Situs Tutorial Pemograman Berbahasa Indonesia