✍ 📁 🙈 🙉 🙊 : 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偏移量 \| 陰影模糊半徑 \| 陰影顏色

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

$(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 下拉陰影

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單