CSS SECRETS 筆記 - Ch4 視覺效果

tags: `CSS SECRETS` `css`

竹白記事本，學習紀錄，2019/03/15。

CSS Secrets
CSS 秘密花園

目錄 CSS SECRETS 筆記

Ch4 視覺效果

單邊陰影
特殊的陰影
上色
毛玻璃效果
折角效果

4-1 單邊陰影

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 單邊陰影

4-2 特殊的陰影

在某些情況下，使用陰影可能會破版。

半透明圖片
圓點、虛線等等邊框
使用偽元素製作的對話框
剪角、折角設計
透過 clip-path 製作的形狀

`filter` 濾鏡

這時可以利用 filter 的 drop-shadow 來解決。

Codepen：CSS SECRETS 4-2 特殊的陰影

4-3 上色

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

1. 濾鏡 `filter`

filter｜MDN

將糢糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。

grayscale，灰階
sepia，懷舊
saturate，飽和
hue-rotate，色相旋轉
invert，負片
opacity，不透明
brightness，亮度
contrast，對比
blur，糢糊
drop-shadow，下拉陰影
Codepen：CSS SECRETS 4-3 濾鏡 filter

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

4-4 毛玻璃效果

純 CSS 特效分享毛玻璃

Codepen：CSS特效練習- 毛玻璃背景特效

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折角效果