css揭祕實戰技巧 - 視覺效果[三]

全目錄

本系列文章，主要是圍繞css3屬性，實現咱們常見的各類效果，這些效果都是咱們實戰開發中常常能夠用到的效果：

1. css揭祕實戰技巧- 背景與邊框 [一]
2. css揭祕實戰技巧- 形狀 [二]
3. css揭祕實戰技巧 - 視覺效果[三]
4. css揭祕實戰技巧 - 字體排印[四]
5. css揭祕實戰技巧 - 用戶體驗[五]
6. css揭祕實戰技巧 - 結構與佈局[六]
7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

1. 單側投影
2. 不規則投影
3. 染色效果
4. 毛玻璃效果
5. 折角效果

一：單側投影

首先，咱們來講明一下box-shadow 屬性值的含義：

box-shadow: 0px 0px 3px red inset;
第一個從參數：表示陰影水平向右的偏移量
第二個參數：表示陰影垂直向下的偏移量
第三個參數：表示陰影的模糊半徑
第四個參數：表示陰影的顏色
第五個參數：表示擴張半徑，根據該值對陰影進行擴大和縮寫
第六個參數：表示陰影向內仍是向外，默認是outset向外，也能夠設置爲inset。
複製代碼

咱們來看一下具體效果，首先是一個矩形：

效果1: 四周陰影：即偏移量爲0

代碼以下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 0px 10px red;
複製代碼

效果2: 兩側陰影

代碼以下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  5px -5px 10px red;
複製代碼

效果3：單側投影 這時，咱們可能直接會想到，只設置垂直或者水平一個方向的偏移量不就能夠了嘛， 代碼以下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 5px 10px red;
複製代碼

實現的效果以下：

這時，咱們才醒悟過來，咱們設置的陰影寬度爲10px, 對於垂直方向，由於咱們設置了向下偏移10px, 因此看上去，top方向是沒有任何陰影的，可是left和right方向無論怎麼偏移，確定會有其中一個方向是有陰影的，那麼，怎麼樣才能夠實現真正的單側陰影呢？

啦啦啦，box-shadow的第四個長度參數隆重登場：它排在 模糊半徑參數以後，稱做擴張半徑。這個參數會根據你指定的值去擴大或 (當指定負值時)縮小投影的尺寸。舉例來講，一個 -5px 的擴張半徑會把投 影的寬度和高度各減小 10px(即每邊各 5px)。 代碼以下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -5px red;
複製代碼

最終的效果以下：

效果4: 雙側投影

代碼以下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -10px red, 0px -10px 10px -10px red;
複製代碼

二：不規則投影

首先，說明一下，什麼是不規則投影，咱們平時設置陰影可能大多數都是給一個正方形或者長方形，甚至圓來設置陰影，這些狀況下，box-shadow的表現是很是好的，可是如何遇到一些不規則的圖形呢？例如以下效果：

這裏以氣泡的效果爲例：

首先，咱們能夠想到，這是由一個正方形加一個三角形實現的（三角形能夠實現原理能夠查看 第二節形狀篇 ），咱們先實現此效果：

代碼以下：

div {
    width: 200px;
    height: 200px;
    background: #dfb311;
    position: relative;
    border-radius: 10px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
div::after {
    content: '';
    display: inline-block;
    border: 20px solid #dfb311;
    border-color: transparent transparent transparent #dfb311;
    position: absolute;
    right: -40px;
    top: calc(50% - 20px);
}
複製代碼

效果以下：

接下來，咱們來設置陰影效果，咱們很直接的想到box-shadow，咱們在div元素中添加該屬性：

div {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)   
}
複製代碼

效果以下：

此時，咱們能夠看到正方形的陰影效果有了，可是三角形尚未，那麼咱們再給三角形加一個box-shadow試試看

div::after{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)
}
複製代碼

效果以下：

怎麼成這樣了？原來三角形的實現原理其實自己就是一個正方形，只不過另外三條邊框的顏色爲透明，那麼，接下來該如何給這種不規則的圖形加陰影效果呢？答案就是採用css濾鏡：drop-shadow();

div {
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
複製代碼

啦啦啦，這樣就獲得咱們想要的效果啦。

三：染色效果

咱們來看一下比較常見的一個效果：

默認狀況下，是一種灰度圖片，hover的時候，灰度消失，正常顯示，那麼如何設置這個灰度效果，就是咱們本節要實現的效果，

方案一：讓ui給兩種場景的圖片，而後切換便可，可是很顯然這樣會增長網絡請求，並且若是要替換成另一種效果，就要把全部圖片所有替換，成本有點高。

方案二：給圖片上層添加一層元素，而且設置透明度，這樣看上去有染色效果，可是並非真正的對圖片進行了染色，同時也大大削弱了圖片的對比度。

方案三： 採用濾鏡的方案

首先，這是一張正常的圖片：

咱們來下降一下飽和度：

代碼以下：

filter: sepia(1);
複製代碼

效果以下：

咱們再來提高一下飽和度：

代碼以下：

filter: saturate(4);
複製代碼

效果以下：

咱們再來對每一個像素的色相進行指定角度進行偏移

代碼以下：

filter: hue-rotate(295deg);
複製代碼

以上三種濾鏡咱們一塊兒來使用：

filter: sepia(1) saturate(4) hue-rotate(295deg);
複製代碼

效果以下：

這就是咱們想要的效果（可能效果沒有原圖好哈，這裏只是說明一下這幾種濾鏡的做用），並且，此時你可能有個疑問，到底我該設置多少的飽和度，或者色相呢？這就涉及到咱們的色彩模型，參考連接：HSL色彩模型

四：折角效果

首先，咱們來看一下，比較常見的一個折角效果：

方案一：直接讓設計給一張背景

方案二：採用border去實現三角形，而後定位到右上角

方案三：採用漸變去實現

div {
    width: 300px;
    height: 200px;
    background: green;
    background:
            linear-gradient(to left bottom,
            transparent 50%, rgba(0,0,0,.4) 0)
            no-repeat 100% 0 / 2em 2em,
            linear-gradient(-135deg,
            transparent 1.5em, green 0);   
}
複製代碼

效果以下：