• HTML5/CSS3 互動特效
  • import_contacts 什麼?? CSS也有濾鏡可以用! (CSS3 filter)
    23610
適用範圍

網頁開發人員

實用性:
重要性:

什麼?? CSS也有濾鏡可以用! (CSS3 filter)

對用過photoshop或修圖軟體(APP)的人,對「濾鏡」這工能應該都不漠生, 想要快速的改變照片的風格,套用濾鏡一定是不二首選!!

其實CSS也是有濾鏡可以用噢!

## CSS3 filter

也就是CSS的濾鏡效果,
它可以對web中所元素進行渲染的較效果,
包含圖片、文字、區塊、表格...等 網頁元素都可以噢~

如果我們再配合上CSS3動畫時間、偽元素滑入(:hover)、JS事件...
就可以做出很多酷炫效果噢!

CSS3 Filter 屬性 10種濾鏡效果

● brightness 亮度
● contrast 對比
● saturate 飽和
● grayscale 灰階
● sepia 懷舊
● invert 負片
● hue-rotate 色相旋轉
● blur 模糊
● opacity 透明度
● drop-shadow影

brightness 亮度

img {
    -webkit-filter: brightness(150%); /* Safari */
    filter: brightness(150%);
}
    

單位:%
初始值100%,大於就變亮,小於就變暗
是不是簡單!!


contrast 對比

img {
    -webkit-filter: contrast(150%); /* Safari */
    filter: contrast(150%);
}      

單位:%
初始值100%,大於對比變大,小於對比變小


saturate 飽和

img {
    -webkit-filter: saturate(200%); /* Safari */
    filter: saturate(200%);
}
        

單位:%
初始值100%,大於變鮮艷,小於彩度變低


grayscale 灰階

img {
    -webkit-filter: grayscale(50%); /* Safari */
    filter: grayscale(50%);
}
      

單位:%
初始值(最小值)0%,最大值100% (黑白灰階)


sepia 懷舊

img {
    -webkit-filter: sepia(80%); /* Safari */
    filter: sepia(80%);
}
      

單位:%
初始值(最小值)0%,最大值100% (棕褐色的懷舊風格)


invert 負片

img {
    -webkit-filter: invert(80%); /* Safari */
    filter: invert(80%);
}      

單位:%
初始值(最小值)0%,最大值100% (負片)


hue-rotate 色相旋轉

img {
    -webkit-filter: hue-rotate(90deg); /* Safari */
    filter: hue-rotate(90deg);
}      

單位:deg
初始值0deg,最大值360deg
就像在色相環調整角度那樣,直接用deg改變色相


blur 模糊

img {
    -webkit-filter: blur(5px); /* Safari */
    filter: blur(5px);
}      

單位:px
初始值0px,沒有最大值
值越大就越模糊


opacity 透明度

img {
    -webkit-filter: opacity(30%); /* Safari */
    filter: opacity(30%);
}      

單位:%
初始值100%,最小值0%
值越小就越透明

0%完全透明,只是看不見,但它還是存在畫面上


drop-shadow 下拉陰影

img {
    -webkit-filter: drop-shadow(8px 8px 10px #000); /* Safari */
    filter: drop-shadow(8px 8px 10px #000);
}      

格式:(水平 垂直 模糊度 擴大 顏色)
水平/垂直(px):設定陰影的位置
模糊度(px):設定陰影模糊程度,值越大就越模糊
擴大(px):設定陰影模糊放大的程度,一樣是值越大就越就越大
顏色(色碼):設定陰影的顏色
它跟box-shadow陰影不太一樣,drop-shadow它會按照目標原始的內容去產生陰影
而box-shadow則是以區塊的方式來產生