# CSS SECRETS 筆記 - Ch4 視覺效果
###### tags: `CSS SECRETS` `css`
[竹白記事本](https://chupainotebook.blogspot.com/)，學習紀錄，2019/03/15。

>[CSS Secrets](https://www.oreilly.com/library/view/css-secrets/9781449372736/?utm_medium=referral&utm_campaign=publisher&utm_source=oreilly&utm_content=buybox)
[CSS 秘密花園](https://www.w3cplus.com/blog/tags/502.html)

## [目錄 CSS SECRETS 筆記](https://hackmd.io/s/HyrK1S1YN)
Ch4 視覺效果
1. [單邊陰影](#4-1-單邊陰影)
2. [特殊的陰影](#4-2-特殊的陰影)
3. [上色](#4-3-上色)
4. [毛玻璃效果](#4-4-毛玻璃效果)
5. [折角效果](#4-5-折角效果)

## 4-1 單邊陰影
[`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)

**表達式：**

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

### 1. 單邊陰影
`blur-radius` 等於負的 `spread-radius`

box-shadow: 0 10px 8px -8px #000;

### 2. 相鄰陰影
- 負 `spread-radius` 是 `blur-radius` 的一半
- `offset-x` 與 `offset-y` 兩個偏移值須大於等於 `blur-radius` 的一半。

box-shadow: 5px 5px 10px -5px #000;

### 3. 相對陰影
使用 **單邊陰影** 技巧兩次。

box-shadow:
  20px 0 10px -10px #000,
  -20px 0 10px -10px #000;

**Codepen：**[CSS SECRETS 4-1 單邊陰影](https://codepen.io/CHUPAIWANG/pen/ywjywy)

## 4-2 特殊的陰影
在某些情況下，使用陰影可能會破版。
- 半透明圖片
- 圓點、虛線等等邊框
- 使用偽元素製作的對話框
- 剪角、折角設計
- 透過 `clip-path` 製作的形狀

### `filter` 濾鏡
這時可以利用 [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) 的 `drop-shadow` 來解決。

**Codepen：**[CSS SECRETS 4-2 特殊的陰影](https://codepen.io/CHUPAIWANG/pen/JzvYLQ)
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 4-2 特殊的陰影" src="//codepen.io/CHUPAIWANG/embed/JzvYLQ/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/JzvYLQ/'>CSS SECRETS 4-2 特殊的陰影</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 4-3 上色
一般來說，要讓圖片視覺上有統一效果，都會用繪圖軟體加上濾鏡，也會搭配 `:hover` 利用兩組圖片來做互動。現在可以直接透過 CSS 來達成目的。

## 1. 濾鏡 `filter`
>[filter｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)

將糢糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。
- `grayscale`，灰階
- `sepia`，懷舊
- `saturate`，飽和
- `hue-rotate`，色相旋轉
- `invert`，負片
- `opacity`，不透明
- `brightness`，亮度
- `contrast`，對比
- `blur`，糢糊
- `drop-shadow`，下拉陰影
**Codepen：**[CSS SECRETS 4-3 濾鏡 filter](https://codepen.io/CHUPAIWANG/pen/KERVwG)
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 4-3 濾鏡 filter" src="//codepen.io/CHUPAIWANG/embed/KERVwG/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/KERVwG/'>CSS SECRETS 4-3 濾鏡 filter</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 2. 混合模式 `mix-blend-mode`
`mix-blend-mode` 是直接在網頁呈現 Photoshop 的圖層混合糢式，所以需要額外增加一個元素來使用。
- `normal`，一般（預設值）。
- `multiply`，色彩增值。
- `screen`，濾色。
- `overlay`，覆蓋。
- `darken`，變暗。
- `lighten`，變亮
- `color-dodge`，加亮顏色（減淡）。
- `color-burn`，加深顏色。
- `hard-light`，實光。
- `soft-light`，柔光。
- `difference`，差異化。
- `exclusion`，排除。
- `hue`，色相。
- `saturation`，飽和度。
- `color`，顏色。
- `luminosity`，明度。

**Codepen：**[CSS SECRETS 4-3 混合模式 mix-blend-mode](https://codepen.io/CHUPAIWANG/pen/EMLgXj)
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 4-3 混合模式 mix-blend-mode" src="//codepen.io/CHUPAIWANG/embed/EMLgXj/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/EMLgXj/'>CSS SECRETS 4-3 混合模式 mix-blend-mode</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 4-4 毛玻璃效果
>[純 CSS 特效分享 毛玻璃](hhttps://www.youtube.com/watch?v=SmFxwLRSulM)

**Codepen：**[CSS特效練習- 毛玻璃背景特效](https://codepen.io/chupai/pen/oMQKNB?editors=1100)

## 4-5 折角效果

### 1. 45度 的解法

  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, #58a 0);

### 2. 其他角度

.box2 {
  position: relative;
  background: #58a;
  background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
  border-radius: .5em;
} 
.box2::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
  width: 1.73em;
  height: 3em;
  transform: translateY(-1.3em) rotate(-30deg);
  transform-origin: bottom right;
  border-bottom-left-radius: inherit;
  box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

如果使用預處理器 SASS，可以減少維護上的繁雜，減少編輯次數。

**Codepen：**[CSS SECRETS 4-5折角效果](https://codepen.io/CHUPAIWANG/pen/NJMbBG)