<small id="uom8i"></small>

CSS 濾鏡技巧與細節(jié)

tinylcy 發(fā)布于2019-04-23 13:34 / 2056人閱讀

摘要：簡單來說，濾鏡就是提供類似的圖形特效，像模糊，銳化或元素變色等功能。常用用法既然是標(biāo)題是你所不知道的技巧與細節(jié)，那么比較常用的一些用法就不再贅述，通常我們見得比較多的濾鏡用法有使用生成毛玻璃效果使用生成整體陰影效果使用生成透明度

本文主要介紹 CSS 濾鏡的不常用用法，希望能給讀者帶來一些干貨！

注意：ie不兼容

本文所描述的濾鏡，指的是 CSS3 出來后的濾鏡，不是 IE 系列時代的濾鏡，話不多說，直接開車，語法如下：

{
    filter: blur(5px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    filter: grayscale(50%);
    filter: hue-rotate(90deg);
    filter: invert(75%);
    filter: opacity(25%);
    filter: saturate(30%);
    filter: sepia(60%);
 
    /* Apply multiple filters */
    filter: contrast(175%) brightness(3%);
 
    /* Global values */
    filter: inherit;
    filter: initial;
    filter: unset;
}

基本用法

先簡單看看幾種濾鏡的效果

你可以通過 hover 取消濾鏡，觀察該濾鏡的效果。

簡單來說，CSS 濾鏡就是提供類似 PS 的圖形特效，像模糊，銳化或元素變色等功能。通常被用于調(diào)整圖片，背景和邊界的渲染。

常用用法

既然是標(biāo)題是你所不知道的技巧與細節(jié)，那么比較常用的一些用法就不再贅述，通常我們見得比較多的 CSS 濾鏡用法有：

使用?filter: blur()?生成毛玻璃效果
使用?filter: drop-shadow()?生成整體陰影效果
使用?filter: opacity()?生成透明度

云服務(wù)器 GPU云服務(wù)器巧用CSS的MASK濾鏡 css技巧使用心得與技巧 css與html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2045.html

相關(guān)文章

CSS 火焰？不在話下

摘要：今天的小技巧是使用純生成火焰，逼真一點的火焰。如上圖，整個蠟燭的骨架，除去火焰的部分很簡單，掠過不講。利用上述，我們要先生成一個類似火焰形狀的三角形。正文從下面開始。今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字 CSS Fire，能找到這樣的： showImg(https://segmentfault.com/img/...

olle 2019-08-30 15:43 評論0 收藏0
CSS 火焰？不在話下

摘要：下圖是我鼓搗到另外一個小，當(dāng)?shù)皆氐臅r候，產(chǎn)生火焰效果嗯，這些其實都是對濾鏡及混合模式的一些搭配運用。主要幾個屬性默認大家已經(jīng)掌握了大概，閱讀后可以自行去了解補充更多細節(jié)更多精彩技術(shù)文章匯總在我的，持續(xù)更新，歡迎點個訂閱收藏。正文從下面開始。今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字?CSS Fire，能找到這樣的：或者...

Cciradih 2019-04-23 11:43 評論0 收藏0
你所不知道的 CSS 陰影技巧與細節(jié)

摘要：本文的題目是陰影技巧與細節(jié)。立體投影好，我們繼續(xù)。下一個主題是立體投影。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當(dāng)然不行。關(guān)于 CSS 陰影，之前已經(jīng)有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關(guān)于 box-shadow 的用法。最近一個新的項目，CSS-Inspira...

supernavy 2019-08-29 17:12 評論0 收藏0
你所不知道的 CSS 陰影技巧與細節(jié)

摘要：本文的題目是陰影技巧與細節(jié)。下一個主題是立體投影。正常而言，我們使用來生成文字陰影，像這樣嗯，挺好的，就是不夠立體。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當(dāng)然不行。關(guān)于 CSS 陰影，之前已經(jīng)有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關(guān)于?box-shadow?的用法。最近...

stormzhang 2019-04-23 13:13 評論0 收藏0
不可思議的純 CSS 實現(xiàn)鼠標(biāo)跟隨效果

摘要：原理以上面的為例子，要使用實現(xiàn)鼠標(biāo)跟隨，最重要的一點就是如何實時監(jiān)測到當(dāng)前鼠標(biāo)處于何處，其實很多效果，都離不開障眼法二字。直接進入正題，鼠標(biāo)跟隨，顧名思義，就是元素會跟隨著鼠標(biāo)的移動而作出相應(yīng)的運動。大概類似于這樣： showImg(https://segmentfault.com/img/remote/1460000018405114); 通常而言，CSS 負責(zé)表現(xiàn)，JavaScr...

sshe 2019-08-30 15:56 評論0 收藏0