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

顯示具有 CSS Filters 濾鏡效果 標籤的文章。顯示所有文章

CSS Filters濾鏡效果

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

blur 模糊	blur(0px)	0px 到100px，的百分比控制
sepia 懷舊	sepia(0)	0 or 1，1為元素轉換成黑白影像
invert 負片	invert(0)	0 or 1，1為元素轉換成負片影像
opacity 透明	opacity(1)	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast 對比	contrast(0)	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	saturate(0)	0 to 10， 10為元素轉換成最大飽和度
brightness 亮度	brightness(0)	0 to 10， 10為元素轉換成最大亮度度
grayscale 灰階	grayscale(0)	0 to 10， 10為元素轉換成最大灰階度
hue-rotate 色相旋轉	hue-rotate(0deg)	0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影	drop-shadow(30px 10px 4px #4444dd)	x偏移量 \| y偏移量 \| 陰影模糊半徑 \| 陰影顏色

<br>
<input type="range" id="blur" value="0" min="0.0" max="100" step="5" />
<span id="Ttblur"> blur(0px)</span>
<br>
<input type="range" id="grayscale" value="0" min="0.0" max="100" step="5" />
<span id="Ttgrayscale"> grayscale(0%)</span>
<br>
<input type="range" id="brightness" value="100" min="0.0" max="999" step="5" />
<span id="Ttbrightness"> brightness(100%)</span>
<br>
<input type="range" id="contrast" value="100" min="0.0" max="999" step="5" />
<span id="Ttcontrast"> contrast(100%)</span>
<br>
<input type="range" id="rotate" value="0" min="0.0" max="360" step="5" />
<span id="Ttrotate"> rotate(0deg)</span>
<br>
<input type="range" id="invert" value="0" min="0.0" max="1" step="1" />
<span id="Ttinvert"> invert(0)</span>
<br>
<input type="range" id="opacity" value="1" min="0" max="1" step="0.1" />
<span id="Ttopacity"> opacity(1)</span>
<br>
<input type="range" id="saturate" value="1" min="0" max="1" step="0.1" />
<span id="Ttsaturate"> saturate(1)</span>
<br>
<input type="range" id="sepia" value="0" min="0" max="1" step="1" />
<span id="Ttsepia"> sepia(0)</span>
<br>
<input type="button" id="Reset" value="reset" />
</td></tr>
</tbody></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).on('input change', '#blur', function() {
         $('#Ttblur').html( 'blur('+$(this).val()+'px)' );
         blur = $(this).val() ; Change(); });

$(document).on('input change', '#grayscale ', function() {
         $('#Ttgrayscale ').html( 'grayscale ('+$(this).val()+'%)' );
         grayscale = $(this).val() ; Change(); });

$(document).on('input change', '#brightness', function() {
         $('#Ttbrightness').html( 'brightness('+$(this).val()+'%)' );
         brightness= $(this).val() ; Change(); });

$(document).on('input change', '#contrast', function() {
         $('#Ttcontrast').html( 'contrast('+$(this).val()+'%)' );
         contrast= $(this).val() ; Change(); });

$(document).on('input change', '#rotate', function() {
         $('#Ttrotate').html( 'rotate('+$(this).val()+'deg)' );
         rotate= $(this).val() ; Change(); });

$(document).on('input change', '#invert', function() {
         $('#Ttinvert').html( 'invert('+$(this).val()+')' );
         invert= $(this).val() ; Change(); });

$(document).on('input change', '#opacity', function() {
         $('#Ttopacity').html( 'opacity('+$(this).val()+')' );
         opacity= $(this).val() ; Change(); });

$(document).on('input change', '#saturate', function() {
         $('#Ttsaturate').html( 'saturate('+$(this).val()+')' );
         saturate = $(this).val() ; Change(); });

$(document).on('input change', '#sepia', function() {
         $('#Ttsepia').html( 'sepia('+$(this).val()+')' );
         sepia = $(this).val() ; Change(); });

$(document).on("click","#Reset",function() {
    $("#blur").val("0");blur=0 ; 
            $('#Ttblur').html('blur(0px)');
    $("#grayscale").val("0");grayscale=0;
            $('#Ttgrayscale').html('grayscale(0%)');
    $("#brightness").val("100");brightness=100;
            $('#Ttbrightness').html('brightness(100%)');
    $("#contrast").val("100") ; contrast= 100;
            $('#Ttcontrast').html('contrast(100%)');
    $("#rotate").val("0") ; rotate= 0;
            $('#Ttrotate').html('rotate(0deg)');
    $("#invert").val("0") ; invert= 0;
            $('#Ttinvert').html('invert(0)');
    $("#opacity").val("1") ; opacity= 1;
            $('#Ttopacity').html('opacity(1)');
    $("#saturate").val("1") ; saturate= 1;
            $('#Ttsaturate').html('saturate(1)');  
    $("#sepia ").val("0") ; sepia = 0;
            $('#Ttsepia').html('sepia(0)');  
Change()});

function Change(){
$("#image").css("-webkit-filter", 
"drop-shadow(" + Dshadoe  +")" +
"blur(" + blur + "px)" + 
"brightness(" + brightness + "%)" + 
"grayscale(" + grayscale + "%)" + 
"hue-rotate(" + rotate + "deg)" + 
"contrast(" + contrast + "%)" + 
"invert(" + invert + ")" + 
"opacity(" + opacity + ")" + 
"saturate(" + saturate + ")" + 
"sepia(" + sepia + ")");
}
Change()

function shad(){
var Ctxt =  TT1.value + "px ";
    Ctxt += TT2.value + "px ";
    Ctxt += TT3.value + "px ";
    Ctxt += TT4.value ;
Dshadoe = Ctxt ;
Change();
dd123.innerHTML =Ctxt ;
}

</script>

#CSS Filters濾鏡效果 #html Filters濾鏡效果 #blur 模糊 #sepia 懷舊 #invert 負片 #opacity 透明 #contrast 對比 #saturate飽和 #brightness 亮度 #grayscale 灰階 #hue-rotate 色相旋轉 #drop-shadow 下拉陰影

CSS Filters濾鏡效果

blur 模糊	blur(0px)	0px 到100px，的百分比控制
sepia 懷舊	sepia(0)	0 or 1，1為元素轉換成黑白影像
invert 負片	invert(0)	0 or 1，1為元素轉換成負片影像
opacity 透明	opacity(1)	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast 對比	contrast(0)	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	saturate(0)	0 to 10， 10為元素轉換成最大飽和度
brightness 亮度	brightness(0)	0 to 10， 10為元素轉換成最大亮度度
grayscale 灰階	grayscale(0)	0 to 10， 10為元素轉換成最大灰階度
hue-rotate 色相旋轉	hue-rotate(0deg)	0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影	drop-shadow(30px 10px 4px #4444dd)	x偏移量 \| y偏移量 \| 陰影模糊半徑 \| 陰影顏色

<table border="2" style="width:100%;height:100%"><tbody><tr><td width="50%" style="text-align: center;vertical-align:middle"><img id="image" src="https://www.w3schools.com/css/pineapple.jpg"></td><td>drop-shadow(  <INPUT type="text" id="TT1" maxlength="3" value="30" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px  <INPUT type="text" id="TT2" maxlength="3" value="10" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px  <INPUT type="text" id="TT3" maxlength="3" value="4" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px  <INPUT type="color" id="TT4"  value="dimgray" onchange="shad()" > )    <br><input type="range" id="blur" value="0" min="0.0" max="100" step="5" /><span id="Ttblur"> blur(0px)</span><br><input type="range" id="grayscale" value="0" min="0.0" max="100" step="5" /><span id="Ttgrayscale"> grayscale(0%)</span><br><input type="range" id="brightness" value="100" min="0.0" max="999" step="5" /><span id="Ttbrightness"> brightness(100%)</span><br><input type="range" id="contrast" value="100" min="0.0" max="999" step="5" /><span id="Ttcontrast"> contrast(100%)</span><br><input type="range" id="rotate" value="0" min="0.0" max="360" step="5" /><span id="Ttrotate"> rotate(0deg)</span><br><input type="range" id="invert" value="0" min="0.0" max="1" step="1" /><span id="Ttinvert"> invert(0)</span><br><input type="range" id="opacity" value="1" min="0" max="1" step="0.1" /><span id="Ttopacity"> opacity(1)</span><br><input type="range" id="saturate" value="1" min="0" max="1" step="0.1" /><span id="Ttsaturate"> saturate(1)</span><br><input type="range" id="sepia" value="0" min="0" max="1" step="1" /><span id="Ttsepia"> sepia(0)</span><br><input type="button" id="Reset" value="reset" /></td></tr></tbody></table><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript">  var Dshadoe = "20px 20px 4px dimgray";   var blur = 0;   var grayscale = 0;   var brightness =100;   var contrast = 100;   var rotate = 0;   var invert =0;   var opacity = 1;   var saturate = 1;   var sepia = 0;  $(document).on('input change', '#blur', function() {          $('#Ttblur').html( 'blur('+$(this).val()+'px)' );          blur = $(this).val() ; Change(); });  $(document).on('input change', '#grayscale ', function() {          $('#Ttgrayscale ').html( 'grayscale ('+$(this).val()+'%)' );          grayscale = $(this).val() ; Change(); });  $(document).on('input change', '#brightness', function() {          $('#Ttbrightness').html( 'brightness('+$(this).val()+'%)' );          brightness= $(this).val() ; Change(); });  $(document).on('input change', '#contrast', function() {          $('#Ttcontrast').html( 'contrast('+$(this).val()+'%)' );          contrast= $(this).val() ; Change(); });  $(document).on('input change', '#rotate', function() {          $('#Ttrotate').html( 'rotate('+$(this).val()+'deg)' );          rotate= $(this).val() ; Change(); });  $(document).on('input change', '#invert', function() {          $('#Ttinvert').html( 'invert('+$(this).val()+')' );          invert= $(this).val() ; Change(); });  $(document).on('input change', '#opacity', function() {          $('#Ttopacity').html( 'opacity('+$(this).val()+')' );          opacity= $(this).val() ; Change(); });  $(document).on('input change', '#saturate', function() {          $('#Ttsaturate').html( 'saturate('+$(this).val()+')' );          saturate = $(this).val() ; Change(); });  $(document).on('input change', '#sepia', function() {          $('#Ttsepia').html( 'sepia('+$(this).val()+')' );          sepia = $(this).val() ; Change(); });    $(document).on("click","#Reset",function() {     $("#blur").val("0");blur=0 ;              $('#Ttblur').html('blur(0px)');     $("#grayscale").val("0");grayscale=0;             $('#Ttgrayscale').html('grayscale(0%)');     $("#brightness").val("100");brightness=100;             $('#Ttbrightness').html('brightness(100%)');     $("#contrast").val("100") ; contrast= 100;             $('#Ttcontrast').html('contrast(100%)');     $("#rotate").val("0") ; rotate= 0;             $('#Ttrotate').html('rotate(0deg)');     $("#invert").val("0") ; invert= 0;             $('#Ttinvert').html('invert(0)');     $("#opacity").val("1") ; opacity= 1;             $('#Ttopacity').html('opacity(1)');     $("#saturate").val("1") ; saturate= 1;             $('#Ttsaturate').html('saturate(1)');       $("#sepia ").val("0") ; sepia = 0;             $('#Ttsepia').html('sepia(0)');   Change()});   function Change(){ $("#image").css("-webkit-filter",  "drop-shadow(" + Dshadoe  +")" + "blur(" + blur + "px)" +  "brightness(" + brightness + "%)" +  "grayscale(" + grayscale + "%)" +  "hue-rotate(" + rotate + "deg)" +  "contrast(" + contrast + "%)" +  "invert(" + invert + ")" +  "opacity(" + opacity + ")" +  "saturate(" + saturate + ")" +  "sepia(" + sepia + ")"); } Change()   function isNumberKey(evt,ID,VV){          var VV = document.getElementById(ID) ;          var charCode = (evt.which) ? evt.which : event.keyCode         if(VV.value > 100){VV.value = 100;shad();return false;}          if (charCode > 31 && (charCode < 48 || charCode > 57))             {shad();return false;}              shad();return true;    }   function shad(){ var Ctxt =  TT1.value + "px ";     Ctxt += TT2.value + "px ";     Ctxt += TT3.value + "px ";     Ctxt += TT4.value ; Dshadoe = Ctxt ; Change(); dd123.innerHTML =Ctxt ; }  </script>

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>

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單