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 ;)
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
UPDATE
Bila ingin efek ini bekerja pada gambar tertentu, kalian bisa menambahkan atribut class image pada kode CSS-nya! Contoh jadi begini kode CSSUPDATE II
Grayscale for Firefox, Chrome, Safari, IE6-9
<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'>Cari kembali kode ]]></b:skin> masukan diatas/sebelum CSS berikut<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>
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
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);
}<img src="http://LINK-GAMBAR.jpg" class="gambar "/>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 HTMLfilter: 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%);
}
<img class="grayscale" src="LINK-IMAGE-HERE" />
<img class="half-grayscale" src="LINK-IMAGE-HERE" />Happy SVG :)
Loading... |
14 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...