✍ 📁 🙈 🙉 🙊 : CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。

blur模糊	0px 到100px，的百分比控制
sepia懷舊	0 or 1，1為元素轉換成黑白影像
invert負片	0 or 1，1為元素轉換成負片影像
opacity透明	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast對比	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	0 to 10， 10為元素轉換成最大飽和度
brightness亮度	0 to 10， 10為元素轉換成最大亮度度
grayscale灰階	0 to 10， 10為元素轉換成最大灰階度
hue-rotate色相旋轉	0deg – 360deg 旋轉色相環
drop-shadow下拉陰影	陰影效果

<input  onchange="Frange(this.value)" type="range" id="points" min="0.1" max="10">
</td></tr>
</tbody></table>
</div>
<div id="DP1">
</div>
<div id="DP2">
</div>
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>   
<script >
$('#points').attr('disabled', 'disabled');

function Fblur(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","blur("+pp+"px)");      
cc2 = $('#imgFiltro').css("-webkit-filter","blur("+pp+"px)"); 
cc3 = $('#imgFiltro').css("-o-filter","blur("+pp+"px)");
cc4 = $('#imgFiltro').css("-ms-filter","blur("+pp+"px)");
cc5 = $('#imgFiltro').css("filter","blur("+pp+"px)");
document.getElementById('DP1').innerHTML ="blur" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=100;
document.getElementById('points').min=0;
document.getElementById('points').step=0.1;
f16311("blur");
}

function Fbrightness(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","brightness("+pp+")");      
cc2 = $('#imgFiltro').css("-webkit-filter","brightness("+pp+")"); 
cc3 = $('#imgFiltro').css("-o-filter","brightness("+pp+")");
cc4 = $('#imgFiltro').css("-ms-filter","brightness("+pp+")");
cc5 = $('#imgFiltro').css("filter","brightness("+pp+")");
document.getElementById('DP1').innerHTML ="brightness" ;
$('#points').removeAttr('disabled'); 
document.getElementById('points').max=10;
f16311("brightness");
}

function Fcontrast(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","contrast("+pp+")");      
cc2 = $('#imgFiltro').css("-webkit-filter","contrast("+pp+")"); 
cc3 = $('#imgFiltro').css("-o-filter","contrast("+pp+")");
cc4 = $('#imgFiltro').css("-ms-filter","contrast("+pp+")");
cc5 = $('#imgFiltro').css("filter","contrast("+pp+")");
document.getElementById('DP1').innerHTML ="contrast" ;
$('#points').removeAttr('disabled'); 
document.getElementById('points').max=10;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;f16311("contrast");
}

function Fdropshadow(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte",    "drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");      
cc2 = $('#imgFiltro').css("-webkit-filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
cc4 = $('#imgFiltro').css("-ms-filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
cc5 = $('#imgFiltro').css("filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
document.getElementById('DP1').innerHTML ="drop-shadow" ;
$('#points').attr('disabled', 'disabled');
f16311("dropshadow");
}

function Fgrayscale(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "grayscale(" +pp+"%)");      
cc2 = $('#imgFiltro').css("-webkit-filter","grayscale(" +pp+"%)");        
cc3 = $('#imgFiltro').css("-o-filter",     "grayscale(" +pp+"%)");       
cc4 = $('#imgFiltro').css("-ms-filter",    "grayscale(" +pp+"%)");          
cc5 = $('#imgFiltro').css("filter",        "grayscale(" +pp+"%)");      
document.getElementById('DP1').innerHTML ="grayscale" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=200;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("grayscale");
}

function Fsepia(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "sepia(1)");      
cc2 = $('#imgFiltro').css("-webkit-filter","sepia(1)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "sepia(1)");
cc4 = $('#imgFiltro').css("-ms-filter",    "sepia(1)");
cc5 = $('#imgFiltro').css("filter",        "sepia(1)");
document.getElementById('DP1').innerHTML ="sepia" ;
$('#points').attr('disabled', 'disabled');
f16311("Fsepia");
}

function Fhuerotate(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "hue-rotate("+pp+"deg)");      
cc2 = $('#imgFiltro').css("-webkit-filter","hue-rotate("+pp+"deg)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "hue-rotate("+pp+"deg)");
cc4 = $('#imgFiltro').css("-ms-filter",    "hue-rotate("+pp+"deg)");
cc5 = $('#imgFiltro').css("filter",        "hue-rotate("+pp+"deg)");
document.getElementById('DP1').innerHTML ="hue-rotate" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=360;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("Fsepia");
}

function Finvert(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "invert(1)");      
cc2 = $('#imgFiltro').css("-webkit-filter","invert(1)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "invert(1)");
cc4 = $('#imgFiltro').css("-ms-filter",    "invert(1)");
cc5 = $('#imgFiltro').css("filter",        "invert(1)");
document.getElementById('DP1').innerHTML ="invert" ;
$('#points').attr('disabled', 'disabled');
f16311("invert");
}

function Fopacity(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",     "opacity("+ pp + ")");      
cc2 = $('#imgFiltro').css("-webkit-filter", "opacity("+ pp + ")"); 
cc3 = $('#imgFiltro').css("-o-filter",      "opacity("+ pp + ")");
cc4 = $('#imgFiltro').css("-ms-filter",     "opacity("+ pp + ")");
cc5 = $('#imgFiltro').css("filter",         "opacity("+ pp + ")");
document.getElementById('DP1').innerHTML ="opacity" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=1;
document.getElementById('points').min=0;
document.getElementById('points').step=0.1;
f16311("opacity");
}

function Fsaturate(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",     "saturate("+ pp + ")");      
cc2 = $('#imgFiltro').css("-webkit-filter", "saturate("+ pp + ")"); 
cc3 = $('#imgFiltro').css("-o-filter",      "saturate("+ pp + ")");
cc4 = $('#imgFiltro').css("-ms-filter",     "saturate("+ pp + ")");
cc5 = $('#imgFiltro').css("filter",         "saturate("+ pp + ")");
document.getElementById('DP1').innerHTML ="saturate" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=10;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("saturate");
}

function Fnone(){   
$('#imgFiltro').removeAttr("style")
document.getElementById('DP1').innerHTML ="none" ;
 
f16311("none");
}

}
   
function f16311(x){  
//if(x == "points"){Fpoints();return;}
//$('#imgFiltro').removeClass();  
//$('#imgFiltro').addClass(x);  
var T_style = "";
    T_style +=  '-moz-filter :';
    T_style += $('#imgFiltro').css("-moz-filte");      
    T_style += '<br /> -webkit-filter : ' ;
    T_style += $('#imgFiltro').css("-webkit-filter"); 
    T_style += '<br /> -o-filter : ';
    T_style += $('#imgFiltro').css("-o-filter");      
    T_style += '<br /> -ms-filter :';
    T_style += $('#imgFiltro').css("-ms-filter");
    T_style += '<br /> filter : ';
    T_style += $('#imgFiltro').css("filter");  
    document.getElementById('DP2').innerHTML =T_style ;

//alert(x)
}

</script>

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單