filter - Learning CSS3

dabblet.css

/**
 * 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); }

dabblet.html

<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>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}