public
Last active

Combined filters demo

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
/**
* Combined filters demo
* Webkit-only at the moment (Chrome Canary or Webkit nightlies)
*/
 
img {
transition: .5s -webkit-filter;
}
 
img:first-of-type {
-webkit-filter: contrast(2000%) grayscale();
}
 
img:nth-of-type(2) {
-webkit-filter: grayscale() contrast(2000%);
}
 
img:nth-of-type(3) {
-webkit-filter: sepia() hue-rotate(60deg);
}
 
img:nth-of-type(4) {
-webkit-filter: sepia() saturate(200%) hue-rotate(160deg);
}
 
img:hover {
-webkit-filter: none;
}
dabblet.html
HTML
1 2 3 4 5
<h1>Hover over the kittens to see how the original image looked like</h1>
<img src="http://placekitten.com/250/220" />
<img src="http://placekitten.com/250/220" />
<img src="http://placekitten.com/250/220" />
<img src="http://placekitten.com/250/220" />
settings.json
JSON
1
{"view":"split-vertical","prefixfree":"1","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.