Skip to content

Instantly share code, notes, and snippets.

@yangg

yangg/dabblet.css

Created Aug 20, 2012
Embed
What would you like to do?
filter - Learning CSS3
/**
* filter - Learning CSS3
*/
dl { float: left; margin: 5px; }
.grayscale img { -webkit-filter: grayscale(100%); }
.sepia img { -webkit-filter: sepia(100%); }
.saturate img { -webkit-filter: saturate(200%); }
.invert img { -webkit-filter: invert(100%); }
.brightness img { -webkit-filter: brightness(1%); }
.contrast img { -webkit-filter: contrast(200%); }
.blur img { -webkit-filter: blur(3px); }
.hue-rotate img { -webkit-filter: hue-rotate(50deg); }
.combine img { -webkit-filter: invert(100%) blur(2px); }
<div>
<dl>
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>original</dd>
</dl>
<dl class="grayscale">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>grayscale</dd>
</dl>
<dl class="sepia">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>sepia</dd>
</dl>
<dl class="saturate">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>saturate</dd>
</dl>
<dl class="invert">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>invert</dd>
</dl>
<dl class="brightness">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>brightness</dd>
</dl>
<dl class="contrast">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>contrast</dd>
</dl>
<dl class="blur">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>blur</dd>
</dl>
<dl class="hue-rotate">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>hue-rotate</dd>
</dl>
<dl class="combine">
<dt><img src="http://ww3.sinaimg.cn/large/a74ecc4cjw1dwdrv9rkwoj.jpg" /></dt>
<dd>combine some filters</dd>
</dl>
</div>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment