Trik Komputer: Make Image to Grayscale Use SVG for Blogger

Artikel ini Koben posting berawal dari Convert an image to grayscale in HTML/CSS. Apakah itu! Membuat gambar menjadi grayscale (warna abu-abu) serta ketika di sorot (hover) akan terlihat warna yang sesungguhnya. Seperti itu kira² penjelasan singkat ala si bloglang anu ganteng kalem tea :)) Setelah mengunjungi links yg ada disana, ternyata ada blogger jg yg ikutan nimbrung membahas topik tersebut b-) Mungkin bagi sobat yg memang serius mau mendalami tentang fitur SVG silahkan cari rujukannya sendiri saja ya :">
Koben sendiri merasa penasaran dengan si SVG dimulai dari membaca artikel dari master @leaverou yaitu CSS reflections for Firefox, with -moz-element() and SVG masks :D Beberapa developer ada yg menggunakan JavaScript dalam mendukung kinerja dari fitur ini. Karena saya tidak paham script menyekript, susah payah cari cara bagaimana hal ini bisa diterapkan ke dalam blog dengan cara yg sederhana ;)

Berikut beberapa contoh keren penerapan SVG feature:

Kembali pada awal topic, membuat gambar menjadi efek abu-abu! Bila ingin cepat membuat efek grayscale pada gambar kalian bisa coba tips berikut going to the france blogger atau ini make tint effect for image used CSS3 ;)

Default SVG Grayscale Coded

<svg height='0' width='0' xmlns='http://www.w3.org/2000/svg'>
<filter id='grayscale'>
<feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>
</filter>
</svg>

<style>
img {
filter:url(#grayscale);
filter:gray;
-webkit-filter:grayscale(1);
}
img:hover {
filter:none;
-webkit-filter:grayscale(0)
}
</style>

Kode diatas sudah saya rombak sedikit dari penemunya. Benar tidaknya saya tidak tahu, tapi berkerja pada blog platform blogspot >:) Kepingin terpasang pada blog secara permanent SVG ini! Ikuti langkah² gue ya... Letakan kode berikut tepat diatas tag <head> atau tepat dibawah/setelah kode

<html b:version='2' class='v2' expr: dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns: data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<svg height='0' width='0' xmlns='http://www.w3.org/2000/svg'>
<filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>
</filter>
</svg>

Cari kembali kode ]]></b:skin> masukan diatas/sebelum CSS berikut

img {
filter: url(#grayscale);
filter: gray;-webkit-filter:grayscale(1);
}
img:hover {
filter: none;
-webkit-filter:grayscale(0);
}

SAVE. Dengan begitu nanti semua tagging img akan berwarna abu-abu, dan ketika di sorot akan terlihat warna sesungguhnya :) Berikut demo langsung (kalau berhasil) :P

OTODIDAK WAYS men hahahaha. Yang jadi masalah cuma satu, gambar akan jadi abu-abu semua =)) =)) Share and care doang kok :"> LoL
UPDATE
Bila ingin efek ini bekerja pada gambar tertentu, kalian bisa menambahkan atribut class image pada kode CSS-nya! Contoh jadi begini kode CSS

.gambar img {
filter: url(#grayscale);
filter: gray;-webkit-filter:grayscale(1);
}
.gambar img:hover {
filter: none;
-webkit-filter:grayscale(0);
}

Pemakaian<img src="http://LINK-GAMBAR.jpg" class="gambar"/>UPDATE II
Grayscale for Firefox, Chrome, Safari, IE6-9

img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
img.half-grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
filter: gray alpha(opacity=50);
-webkit-filter: grayscale(50%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
img.half-grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

Markup HTML

<img class="grayscale" src="LINK-IMAGE-HERE" />
<img class="half-grayscale" src="LINK-IMAGE-HERE" />

Happy SVG :)

Trik Komputer

Rabu, 15 Februari 2012

Make Image to Grayscale Use SVG for Blogger

Default SVG Grayscale Coded

Tidak ada komentar:

Posting Komentar