SVG feComponentTransfer属性实例 - RGB颜色通道滤镜

SVG RGB Color Channel Filter Refer to: http://ksesocss.blogspot.com/2015/05/filtro-SVG-feComponentTransfer.html

svg，filter

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2294
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Signika:300);
*,
*:after,
*:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;
}
html,
body {
    min-height: 100vh;
    font-family: Megrim;
    font-family: Signika;
    font-weight: 300;
    color: #fff;
}
.correction {
    width: 100%;
    -webkit-filter: url(#filterCanal) contrast(2);
    filter: url(#filterCanal) contrast(2);
}
.control {
    background: rgba(255, 255, 255, .3);
    position: absolute;
    right: 0;
    top: 0;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
}
p {
    font-size: 1.5rem;
}
[type='range'] {
    display: block;
    width: 100%;
}
label {
    display: block;
}
[for='tintaR'] {
    background: rgba(255, 0, 0, .5);
}
[for='tintaG'] {
    background: rgba(0, 255, 0, .5);
}
[for='tintaB'] {
    background: rgba(8, 0, 255, .5);
}
output[for] {
    background: transparent;
}
.tester {
    background: -webkit-linear-gradient(left, red 33.2%, green 33.3%, green 66.5%, blue 66.6%);
    background: linear-gradient(to right, red 33.2%, green 33.3%, green 66.5%, blue 66.6%);
    text-align: center;
    letter-spacing: 1rem;
    margin-top: 1rem;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5);
}
.hide {
    position: absolute;
    height: 0;
    width: 0;
    overflow: 0;
    left: -100%;
}
.aviso {
    background: #ea8e39;
    position: fixed;
    bottom: 0rem;
    left: 1rem;
    color: #fff;
    line-height: 2rem;
    border-radius: 5px 0 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .4);
    z-index: 100;
}
.aviso a {
    text-decoration: none;
    color: #000;
}

HTML

<img class='correction' src='/uploads/160301/s2.jpg' alt />
<nav class='control'>
    <p>Track the inputs for each chanel</p>
    <label for='tintaR'>RED
        <input type="range" min="0" max="2" value="1" step="0.05" id="tintaR" oninput="feFunc()" />
        <output for='tintaR' id='VtintaR'>1</output>
    </label>
    <label for='tintaG'>GREEN
        <input type="range" min="0" max="2" value="1" step="0.05" id="tintaG" oninput="feFunc()" />
        <output for='tintaG' id='VtintaG'>1</output>
    </label>
    <label for='tintaB'>BLUE
        <input type="range" min="0" max="2" value="1" step="0.05" id="tintaB" oninput="feFunc()" />
        <output for='tintaB' id='VtintaB'>1</output>
    </label>
    <p class='tester correction'>TESTER</p>
</nav>

SVG RGB Color Channel Filter Refer to: http://ksesocss.blogspot.com/2015/05/filtro-SVG-feComponentTransfer.html

svg，filter

编辑器支持Emmet

快捷键

SVG RGB Color Channel Filter Refer to: http://ksesocss.blogspot.com/2015/05/filtro-SVG-feComponentTransfer.html

svg，filter

用SVG filter实现的马赛克图片过滤效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：