December 29, 2013 thumb Mengubah Gambar dengan CSS3

CSS3 memberikan beragam kelebihan. salah satu tool yang sangat menarik dari css3 adalah filter (-webkit-filter). tool ini memberikan kemudahan bagi para programmer untuk mengubah supaya tampilan sebuah element (div, img) dalam HTML dapat dirubah dengan effect-effect tertentu (grayscale, sepia, black and white, contrast dll). berikut ini adalah beberapa parameter dari -webkit-filter. sebagai contoh saya menggunakan sebuah gambar asli berikut , nantinya gambar ini akan diubah menggunakan effect-effect dalam webkit filter.

Foto asli

Foto asli

 Opacity

Salah satu parameter dalam css3 adalah opacity, opacity memakai parameter dari angka 0 sampai 1 dalam bentuk bilangan float (0, 0.1, 0.3 … dst) atau dalam bentuk percentage dari 0 sampai 100%. berikut adalah syntax-nya :

-webkit-filter: opacity(50%); -moz-filter:opacity(50%); -o-filter:opacity(50%);

jika Foto asli diatas diubah Opacity-nya (tingkat transparency) menggunakan opacity 50% hasilnya sebagai berikut :

Opacity 50%

Opacity 50%

Sepia

ini adalah effect yang paling saya sukai, jika anda ingin supaya foto anda menjadi ber-effect sepia, cukup dengan menggunakan webkit filter maka foto anda otomatis akan berubah menjadi sepia. parameter sepia  menggunakan percentage dari 0 sampai 100.

-webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%);
Sepia 100%

Sepia 100%

Grayscale

effect grayscale akan membuat sebuah gambar yang tadinya penuh warna menjadi sebuah gambar grayscale, sama seperti sepia ia juga menggunakan parameter percentage dari 0 sampai 100.

-webkit-filter: grayscale(80%);-moz-filter: grayscale(80%);-o-filter: grayscale(80%);
Grayscale 80%

Grayscale 80%

Hue Rotation

filter ini mampu mengubah warna sebuah gambar dengan cara menggeser RGB-nya. satuanya dari angka 0 degree sampai 360 degree (lebih dari itu akan muter-muter alias berulang karena satuanya adalah degree).

-webkit-filter: hue-rotate(180deg);-moz-filter: hue-rotate(180deg);-o-filter: hue-rotate(180deg);
Hue Rotate 180deg

Hue Rotate 180deg

Invert (Effect Negatif)

Invert akan mengubah seluruh warna RGB menjadi warna invert-nya, sehingga foto anda akan tampak seperti foto pada Negatif film. parameternya menggunakan percentage sama seperti yang lain dimulai dari  0 sampai 100%.

-webkit-filter: invert(100%);-moz-filter: invert(100%);-o-filter: invert(100%);
Invert 100%

Invert 100%

Blur

effect ini akan membuat gambar yang anda miliki menjadi blur, parameter menggunakan satuan pixel (px), sehingga anda dapat mengutak-atik sendiri berapa level pixel blur yang anda inginkan (tapi jangan terlalu banyak, kalau terlalu banyak gambarnya gak kelihatan).

-webkit-filter: blur(10px);-moz-filter: blur(10px);-o-filter: blur(10px);
Blur 10px

Blur 10px

Brightness

filter ini akan meningkatkan level brightness pada sebuah element. parameternya menggunakan angka dari 0 sampai 10 dalam bentuk float (1.1 , 0.1, 3.0 dst..).

-webkit-filter: brightness(5.1);-moz-filter: brightness(5.1);-o-filter: brightness(5.1);
brightness (5.1)

Brightness (5.1)

Contrast

adalah filter yang mana akan mengubah tingkat perbedaan bagian paling gelap dengan bagian yang paling terang. parameter filter ini sama seprti brightness berupa bilangan float dari 0 sampai 10.

-webkit-filter: contrast(5.1);-o-filter: contrast(5.1);-moz-filter: contrast(5.1);
contrast (5.1)

contrast (5.1)

Saturate

filter ini akan membuat warna semakin menyala. parameter saturate sama seperti brightness dan contrast, ia berupa bilangan float dari 0 sampai 10.

-webkit-filter: saturate(5.1);-moz-filter: saturate(5.1);-o-filter: saturate(5.1);
saturate (5.1)

saturate (5.1)

demikian adalah filter-filter yang bisa saya bahas. sebernarnya kita dapat menggabungkan filter-filter tersebut, misalnya anda ingin memberikan effect sepia 10%, grayscale 1%, saturate dinaikan 1.4, brightness 2, contrast 3, blur 2px, hue-rotate (100deg), kemudian opacity 80%, dan invert 100%.  maka tinggal anda gabungkan kesemua effect tersebut seperti ini :

-webkit-filter: sepia(10%) grayscale(1%) brightness(2) contrast(3) saturate(1.4) blur(2px) hue-rotate(100deg) opacity(80%) invert(100%);-o-filter: sepia(10%) grayscale(1%) brightness(2) contrast(3) saturate(1.4) blur(2px) hue-rotate(100deg) opacity(80%) invert(100%);-moz-filter: sepia(10%) grayscale(1%) brightness(2) contrast(3) saturate(1.4) blur(2px) hue-rotate(100deg) opacity(80%) invert(100%);

sepia(10%) grayscale(1%) brightness(2) contrast(3) saturate(1.4) blur(2px) hue-rotate(100deg) opacity(80%) invert(100%)

hasilnya jadi gak karuan hehehe, maklum saya bukan designer atau image editor hehehe… dalam contoh disini saya menggunakan Image sebagai contoh, sepernarnya tidak hanya image, melainkan juga semua element dalam html (div, body, p, a dst..). sebagai contoh situs ini sudah saya lengkapi dengan plugin yang saya buat sendiri untuk membuat effect tersebut, silakan ubah pada mode simple (ada di sidebar bawahnya search), kemudian pilih help (setelah masuk mode simple, ada dibagian kanan atas), pada tab bagian settings anda bisa mengutak-atik tampilan situs ini sesuai keinginan. bingung… tekan saja tombol Ctrl + Shift + H di keyboard anda, nanti help juga muncul sendiri hehehe…, kalau nggak berhasil juga, silakan tekan tombol ini Help . mohon maaf kalau ada yang salah dan silakan  dikoreksi atau ditambahkan. salam goblooge.

Comments

total comments