# Google 教你 CSS 015~022

###### tags: `HTML, CSS`

# 015 Border

從本篇中學習如何調整 border 的大小、樣式、顏色吧！

## Border properties

先從 border-style 樣式開始挑吧！


這幾種比較特別

* ridge 浮雕效果（浮出來）
* inset 陷進去效果
* outset 凸出效果
* groove 雕刻效果 （刻進去）


再來要注意到的是 style 可能會因應瀏覽器的不同而會有不一樣的呈現

這邊 dotted 跟 dashed 有比較明顯的區別，所以記得比較瀏覽器之間畫面的呈現


## Shorthand

.my-element {
	border: 1px solid red;
}

縮寫的順序
1. border-width
2. border-style
3. border-color

## Color

如果沒有設定 border-color 話則會使用 currentColor 也就是 color 設置的顏色，以下方做範例的話就是目前 border-color 為藍色

.my-element {
	color: blue;
	border: solid; /* Will be a blue border */
}

修飾四個邊的 border 屬性

* border-top-color
* border-right-color
* border-left-color
* border-bottom-color

## Width

這邊 width 是指 bordr 的粗細可以使用 border-width 操作數值，其 default 數值為 medium ，當然也可以設置 thin, thick


當然也可以接受這些單位來操作 border-width : px, em, rem or %

修飾四個邊的 border-width 屬性

* border-top-width
* border-right-width
* border-left-width
* border-bottom-width.

## Logical properties

在 logical properties 的章節中，認識到 block/ inline flow，會比 top/ right/ left/ bottom 來得更無障礙友善

.my-element {
	border: 2px dotted;
	border-inline-end: 2px solid red;
}


這邊 inline-end 的意思是：

* 從左到右書寫的文字系統下，代表紅色的邊框就會在右邊底部
* 如果是右到左話則會是左邊出現紅色邊框

## Border radius

給邊框做出圓角的效果

.my-element {
	border-radius: 1em;
}


修飾四個邊的 border-radius 屬性

* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius

其實每一個 border-radius 都有兩個方向如下 垂直/ 水平，所以只寫一個數值其實也是一個縮寫

top-left-left
top-left-top

.my-element {
	border-top-left-radius: 1em 2em;
}

也可以使用縮寫，左上/ 右上/ 右下 / 左下

.my-element {
	border-radius: 1em 2em 3em 4em;
}

剛有提到 border-radius 每一邊其實都有垂直跟水平方向的數值可以設置
可以使用 / 來隔開，藉此創造出更複雜的圖形

.my-element {
	border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}


## Border images

設置圖片當作 border 的屬性，下方的屬性是用來調整 border-image 的

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}


border-image-width 跟 border-width 一樣都是設置邊框的寬度

border-image-outset 設置你的 border-image 以及你的 box 的距離

border-image-source 可以使用任何 url 甚至 linear-gradient

border-image-slice 像是 marign 一樣定義 上右下左的 offset value

.my-element {
	border-image: url('image.jpg');
	border-image-slice: 61 58 51 48;
}


border-image-repeat 決定 border-image 重複的方式

* 起始值是 stretch 會讓圖片填滿所有可用空間
* repeat 會堆砌所有的 border-image 邊緣直到填滿所有空間，有可能會切到邊邊的圖片來達成目的
* space 跟 repeat 很像不過會在每個 border-image 加上空間



# 016 Shadows

本章節中可以學到如何設定 shadow

## Box shadow

為 html 的元素加添陰影，不管是 inline 或是 block 元素都適用

.my-element {
	box-shadow: 5px 5px 20px 5px #000;
}

order of values for box-shadow：

1. Horizontal offset: 正值陰影會從左往右被推出，負值則會從右往左被推出
1. Vertical offset: 正值陰影會從上往下被推出，負值則會從下往上被推出
1. Blur radius: 數值越大越模糊，越小則越銳利
1. Spread radius (optional): 數值越大則範圍越大，越小則相反
1. Color： 任何可以操作的 color value，沒設定的話就是預設 textColor
2. inset : 可以讓陰影長在元素裡面

設定 inset 長在內部的陰影


## Multiple shadows

可以給所有方向都加上 shadows 用逗號隔開即可

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

這邊的扣就是內外都加，上下左右都加上去的概念


## Properties affecting box-shadow

### border-radius

如果給元素上了 border-radius 屬性則其 shadow 也會因此被修飾出圓角，因為 css 是根據基底的元素來創造 shadows 所以如果基底的形狀改變了 shadow 也會跟著改變

### overflow: hidden

簡單來說 shadow 也會因為這個屬性而因此不會超出元素因此會整個消失不見


## Text shadow

跟 box-shadow 屬性非常類似，只是此屬性只會作用在 text 上面

text-shadow 的屬性值跟 box-shadow 一樣，並且其縮寫順序也是一樣的，不過差別在於它沒有 inset 以及 spread 屬性


使用 text-shadow 比較特別的是，文字本體如果是有上透明度的話，則會直接透過文字本體，然後 box-shdaow 則不會

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

由下圖可以看到，金色的 text-shadow 都會透過黑色透明度 70% 的文字


## Multiple shadows

text-shadow 一樣可以添加複數的 shadows 上去，操作方式一樣是加逗號即可

下圖是利用同方向堆疊 shadows 的做法做出立體的文字效果


## Drop shadow

針對圖片的不規則形狀要做出 shadow 就得使用 drop-shadow filter 這個屬性來做操作


filter 這個屬性會在其他章節中做更詳細的介紹，但簡單來說就是可以附加複數的圖形效果至元素的 px 上

drop-shadow 跟 box-shadow 的屬性值跟縮寫形式也是差不多的不過 inset 以及 spread 一樣都是沒有的

如果要操作複數的 drop-shadow 則直接寫出複數的實體即可，每一個多寫的實體會根據前一層的位置作為參考來修飾


# 017 Focus

> 管理 focus 來確保鍵盤以及滑鼠使用者選取的路徑

範例中使用 tab 選取按鈕並且使用 enter 點擊之後


下方 main 的文字就被 focus 圈了起來


是因為 `<main>` 的 `tabindex="-1"` 這個屬性，代表他可以被 focus 到，並且因為 id 為上方按鈕設定好的位置

## Why is focus important?

讓鍵盤、switch control 使用者可以用選取的方式操作網頁，如果網頁中的元素已經被選取到了卻沒有任何的顯示，會讓使用者不知道自己在操作哪邊，進而導致錯誤，

## How elements get focus

部分原生 html tag 是預設接受 focus 的

* `<a>`
* `<button>`
* `<input>`
* `<select>`

簡單來說就是 form 、連結、按鈕系列的 tag 都原生支援 focus

* 使用方式上面則是 tab 可以往下選
* 按住 shift 後＋ tab 可以往回選

tabindex 是一個很重要的 html 屬性，他可以修改 tab 選取元素的順序，如果 tabindex 的值為 0 則他會根據 document 中的順序來做選取

如果設置其值為 -1 的話則他只會被 focus programmatically ，意思是他只會被 JS 操作或是 hash 使用 id 的方式來抓取

如果設置的值超過 0 則會不受 document 的排序限制，並根據 tabindex 的值來做 tab 抓取排序

### 注意

這邊作者有特別提醒，遵照 document 的 html 順序非常的重要，除非你非常確定這邊需要使用特別的方式來直接修改順序，不然一般不要去修改

## Styling focus

主要使用這三個 pseudo-classes 來修飾 focus 外框，盡量讓外框可以有高反差與內容做出對比

* :focus
* :focus-within
* :focus-visible

最常用在 focus 又特別明顯的數性是 outline

a:focus {
  outline: 2px solid slateblue;
}


如果覺得 outline 太貼近文字需要一點 padding ，則可以使用 outline-offset 正值的操作會讓 padding 加大，反之則會越靠近內容


目前來說元素就算設定了 border-radius 你的 outline 並不會吃到那個屬性會還是尖銳的邊角，這時候操作 box-shadow 並且只設定 spread 屬性其他為 0 就可以做出一圈類似 outline 並且符合 border-radius 的效果摟，但不推薦這樣使用


因為這個方法會在高對比模式下失效，因為在那模式下不會支援 box-shadow 屬性，並且會忽略 background-image 來使高對比模式成立


## In summary

* 盡量避免使用 outline 屬性 none : 因為會讓各種操作都選取不到
* 避免使用 box-shadow 代替 outline 屬性因為會在高對比模式下失去效果
* 盡量只設定正值在 tabIndex 上，除非真的沒有辦法了
* 要把 focus state 狀態做出明顯差異於 default state

# 018 Z-index and stacking contexts

> 在此 moduel 中學習操作元素如果堆疊在一起的順序

## Z-index

z-index 主要處理的面向在 Y 軸，其值可以輸入 正或是負數 ，當數字高於其他者時則會疊在上方


如果沒有設置 z-index 則是遵照 document 的順序，順序後方的會疊在前面


## 注意

特別注意的地方是，如果 z-index 沒有發揮效果，此時把 position 的屬性從預設的 static 調整為其他的他就會發生作用了

不過在 flex / grid 中則可以不用調整 position 就可以直接產生作用了！

## Negative z-index

> 讓目標元素放置於下方

.my-element {
	background: rgb(232 240 254 / 0.4);
}

.my-element .child {
	position: relative;
	z-index: -1;
}

可以達到這個效果


.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

原因是 `.my-element` 的 position 不再是 static 以及 z-index 的值也不再是 auto 因此創造了新的 stacking context ，這代表了就算 `.child` z-index 設定為 -999 也不會讓 `.child` 被蓋過了


## Stacking context

他的意思是在 stacking context 的 group 中，他們有著共同的 parent 並且他們在 Z 軸會被捆在一起移動

這張圖片很好的解釋了 stacking context ，儘管上圖有個 z-inddex 999 的元素，但是他並不會蓋過 z-index 僅僅有 2 的下方元素，正因為他們屬於不同的 stacking context


<div class="top">
    <code>z-index: 1;</code>
        <div class="inner">
            <code>z-index: 999;</code>
        </div>
</div>

<div class="bottom">
    <code>z-index: 2;</code>
        <div class="inner">
            <code>z-index: 2;</code>
        </div>
</div>

可以從 html 結構中看出來，他們的 parent 不同所以他的 z-index 並不會互相影響

## Creating a stacking context

stacking context 的用處在於幫助網頁效能處理，像是 opacity, transform and will-chang ，這些屬性都會創造出一個 composite layer ，意思是這些區塊高機率會有更動，瀏覽器會因此注意這些區塊並且讓他們的效能更好

# 019 Functions

> css 中有一些 build-in function 可以使用，會在本章中作介紹

在 grid 以及 color 章節中其實已經介紹了一些

grid :
`minmax()` `fit-content()`

color:
`rgb()` `hsl()`

## What is a function?

function 是一個被命名的並且包含數段程式碼來處裡特定的任務，並且可以傳入參數


很多 css functions 都是 pure function ，代表如果你傳入相同的參數進去，它會永遠回傳一樣的結果，不管在你的扣的其他地方發生任何事情都一樣，這些 pure function 常常會需要重新運算其值 舉例 currentColor

在 css 中 function 只能使用它提供的目前還不能自訂，不過可以使用巢狀的方式操作函式，讓其更具有彈性

## Functional selectors

.post :is(h1, h2, h3) {
	line-height: 1.2;
}

像是 `:is()`, `:not()`，參數被傳進去之後，會開始做 evaluate ，如果符合規則會套用裡面的 css rule 則會套用

## Custom properties and var()

:root {
	--base-color: #ff00ff;
}

.my-element {
	background: var(--base-color);
}

* 其實 custom properties 就是語言中的變數的概念，讓你可以儲存內容並使用在可以取得他的地方
* custom properies 也會受 cascade 的影響，意思是權重以及在檔案中的位置會影響 css rule
* 必需要使用`（--）` 並且大小寫需要注意
* var() 可以帶兩兩個參數，一個是必須的也就是 custom properties ，第二個值可以作為 fallback

.my-element {
	background: var(--base-color, hotpink);
}

## Functions that return a value

下面這兩個 functions 跟 `var()` 一樣都會回傳值

這邊 attr 拿取 a tag 的 href 屬性並且反映在其 after 產生出來的元素上，所以當 a tag 的 href 改變時， after 的 href 也會一起改變

a::after {
  content: attr(href);
}

這邊 url 使用右邊串字內的連結來讀取圖片文字或是內容

.my-element {
	background-image: url('/path/to/image.jpg');
}

## Color functions

rgb(), rgba(), hsl(), hsla(), hwb(), lab() and lch()

這些 color functions 都有些共同點就是，設定的參數會被傳入後回傳 color 的值

## Mathematical expressions

## calc()

放入其中的參數可以是多種型態的長度、數字、角度、頻率，單位也是如此

.my-element {
	width: calc(100% - 2rem);
}

當然也可以在 `clac()` 中，使用巢狀的寫法，甚至是放入 custom properties 的寫法

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

## min() and max()

這兩個 functions 會回傳參數當中最小以及最大值

min:
最小的 width 會被限制在 20vw 的寬度下，並且最大不會超過 30 rem

max:
最小的 height 值會被限制在 20rem 不能再低，如果 view height 高於 20vh 則值可以再大

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

## clamp()

可以放入三個參數，min, ideal, max 基本上就是又使用 min 又使用 max 的概念，既有最大值又有最小值的概念

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

可以藉此做出更加 RWD 的文字大小

## Shapes

藉由調整 x,y 軸的數值來剪出形狀

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}


## Transforms

可以操作 transforms 來讓元素偏邊、重整大小、改變深度

### rotate

可以操作下面屬性來做旋轉在各個面向

`rotateX()`, `rotateY()` and `rotateZ()`

 .my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d()

前三個數值是 x, y, z 軸的座標，最後一個值像是在一個 rotate 函式的概念可以放入度數或是角度或是 turns

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

### Scale

可以修改元素的尺寸、比例，其函式接受兩個參數分別是 x, y 軸的數值，如果只放一個則兩個軸都處理
`scaleX()`, `scaleY()` and `scaleZ()` 一樣有三個方向可以調整，同時也存在 `scale3d`

X 調整水平方向，Y 調整垂直方向


### Translate

這個函式可以移動元素，一樣有 translateX, translateY and translateZ 三個方向可以移動，並且也一樣有 `translate3d`

### Skewing

可以操作元素傾斜，接受角度作為參數

.my-element {
  transform: skew(10deg);
}

skewX and skewY


### Perspective

可以用來創造出元素的深度，做出 3D 或是透視的效果

可以操作這個 codepen 玩看看
https://codepen.io/desandro/pen/bMqZmr

## Animation functions, gradients and filters

在之後的章節中可以看到詳細的說明

# 020 Gradients

本章節主要會介紹如何使用 gradients 達到很多有用的效果


## Linear gradient

創造一個圖像使用兩個甚至三個以上的顏色


也可以輸入 ”角度“ 或是 ”關鍵字 to 方向“ 來表示角度


甚至有這樣的寫法，（先定義好方向，第一個顏色, 第二個顏色 ）並且可以設定 % 來做表示該顏色何時會停止換下一個顏色上場


可以藉由逗號來一直疊顏色上去


## Radial gradient

跟 linear 很像，不過這次顏色疊層的是從 center 開始往外疊出去


以下四個屬性控制形狀最後的大小

* closest-side
* closest-corner
* farthest-side
* farthest-corner

## Conic gradient

會在從中間有一點往上方延伸( 預設的可以修改)並且根據顏色做出變化


也可以透過數值作出修改 從 10 度開始轉，轉個轉的位置移動到 20% 30% 的位置


同樣可以加入多種顏色，比較常用的用途是圓餅圖


## Repeating and mixing

重複紅白線條並且設定明確的大小區間就可以做出條紋的效果


複數的 linear 可以使用在 background 的情況


# 021 Animations

annimations 是一個讓可互動區域可明顯的一個好用的 css 效果

## What is a keyframe?

keyframe 是一種機制讓使用這可以在一定的時間軸下定義動畫的 state 在特定的時間點上

pulse 這個屬性就在一秒兩有兩個 state 並且在分布在特定時間上


### @keyframes

其使用的方式很像 function 先定義好名字以及內容後再要使用的地方做 referrence 即可

@keyframes my-animation {
	from {
		transform: translateY(20px);
	}
	to {
		transform: translateY(0px);
	}
}

`<custom-ident>` 是 @keyframes 使用的一種規則，他同時也被很多地方應用到比說方說命名 grid line 的名稱，不過要注意的是會有一些保留字以及大小寫敏感比如 span 就不可以命名 gird line

from/ to 關鍵字也可以使用 % 來表示時間起始

@keyframes my-animation {
	0% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(0px);
	}
}

現在就可以來使用剛剛的 pulse 來做示範，因為其有兩個 state ，一個是沒有的狀態，一個是背景放大的狀態，可以操作 opacity 來做到慢慢出現， scale 來做到放大的效果

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

## The animation properties

介紹 animation 的屬性們

### animation-duration

他定義了整個動畫時間軸會有多長，填入的單位為時間，不能填入負值

.my-element {
	animation-duration: 10s;
}

### animation-timing-function

動畫行進的速率，比方說線性就會是比較一致的速度，ease 會有個由慢到快的感覺

* linear
* ease
* ease-in
* ease-out
* ease-in-out

[可以用範例玩看看](https://codepen.io/web-dot-dev/pen/YzNeJbL)

每個 animation-timing-function 的屬性都會對應到一個 bézier curve 想當然你也可以用這個屬性來自定義藉由使用 `cubic-bezier()` x1, y1, x2, y2.

#### The steps easing function

如果想要讓動畫呈現是 curve 以外的曲線的話，比方說你想要使用間隔型態的動畫就可以使用 `steps()` easing function ，讓你把時間軸打碎成數個相同長度的時間區間

第一個參數是代表會把時間軸分割為幾個階段如果參數為 10 則代表會有 10 個 keyframe，第二個參數則是方向

.my-element {
	animation-timing-function: steps(10, end);
}

[可以用範例玩看看](https://codepen.io/web-dot-dev/pen/JjEpege)

### animation-iteration-count

這個屬性會定義這個動畫 keyframe 會跑幾次，數值不可以為 0 ，其初始值為 1 代表跑了一次動畫就會結束

.my-element {
	animation-iteration-count: 10;
}

可以操作 infinite 這個值讓動畫無限跑下去

### animation-direction

每段 keyframe 動畫跑的方向

.my-element {
	animation-direction: reverse;
}

normal: 是 default 值，動畫會往前走
reverse: 動畫往反方向走
alternate: 在每個區間中走往前以及往後同時發生
alternate-reverse: alternate 的相反狀態

### animation-delay

這個屬性是開始動畫前的等待時間，接受時間為單位的值，不過他可以接受負值，並且會因為負值的 % 從 keyframe 的那個階段開始，比方說你的動畫有 10 秒長， animation-delay 設置 -5 秒的話就會從 50% 的部分開始跑起

### animation-play-state

有預設值 running 以及另一個屬性 pause 一般用來停止動畫

當 hover 發生在 .my-element 時就停止動畫

.my-element:hover {
	animation-play-state: paused;
}

### animation-fill-mode

這個屬性是指動畫結束時候的狀態

forwards: 最後一個 keyframe 的狀態會呈現
backwards: 第一個 keyframe 的狀態會呈現
both: forwards/ backwards 規則都適用

### The animation shorthand

縮寫順序如下：

1. animation-name
1. animation-duration
1. animation-timing-function
1. animation-delay
1. animation-iteration-count
1. animation-direction
1. animation-fill-mode
1. animation-play-state

.my-element {
	animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

## Considerations when working with animation

可以使用 @media (prefers-reduced-motion) 來設置讓動畫的動作減少

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

# 022 Filters

在 css 中 filters 可以讓你用出各種似乎只能使用 graphic app 才能用出的特效

比方說想要產出玻璃質感並且不透光的區塊


Blur and opacity 是 filter 中重要的兩大濾鏡

這邊需要注意假設有需求是要把 text 寫在 filter 的區塊中，必需要注意如果瀏覽器不支援 filter 屬性的情況下文字能不能正常顯示，這部分需要特別去測試

## The filter property

可以一次應用多個 fitler 屬性，不過要注意的是如果一個使用錯誤了之後套上的 filter 並不會發生作用

.my-element {
	filter: blur(0.2em);
}


## brightness

亮度

數值主要接受百分比以及小數點比方說 (80% = 0.8)，0~100 100 為初始值， 0 為完全黑，以上則為調高亮度

.my-element {
	filter: brightness(80%);
}


## contrast

設定顏色對比度

.my-element {
	filter: contrast(160%);
}


## grayscale

灰階

使用上可以直接輸入 0/1 或是 百分比以及小數點都是可以接受的值，如果韓式沒有輸入值則是直接套用完整灰階效果也就是 1 的效果，如果使用效果超過 100% 則套用 100% 效果不會超過

.my-element {
	filter: grayscale(80%);
}


## invert

顏色反轉

值的操作跟 grayscale 很像

.my-element {
	filter: invert(1);
}


## opacity

透明度

如果沒有輸入參數則可見度則是 100%

.my-element {
	filter: opacity(0.3);
}


## saturate

色彩濃度

這個屬性跟 brightness 很像接受的參數也很像，不過他增加的不是亮度而是顏色的濃度

.my-element {
   filter: saturate(155%);
}


## sepia

暖色系濾鏡

運作方式跟 graysacle 很像，不過他可以把 black tone 的顏色轉換成 brown tone 讓顏色比較暖，如果不帶入參數則是完整的 sepia 效果

.my-element {
	filter: sepia(70%);
}


## hue-rotate

類似轉動色彩轉盤輸入角度進去當作參數修改顏色，沒有參數則不做事

.my-element {
	filter: hue-rotate(120deg);
}


## drop-shadow

類似 box-shoadow 但是他可以更貼緊元素的邊邊使用下面四個屬性：

offset-x, offset-y, blur and color values

跟 box-shadow 一些比較：

* inset, spread 屬性不能使用
* 效能上面比較吃重
* 瀏覽器支援度較 box-shadow 差


## url

可以應用來自網址的 SVG 元素到要修飾的元素上面

.my-element {
  /*  Defined in SVG  */
  filter: url(#pink-filter);
}


## Backdrop filter

這個 function 使用的值跟 filter 一樣，不過他只能作用在 background ， filter 則是作用在整個元素上面

還記得最開頭的圖片嗎？ 如果不想要因為瀏覽器不支援而導致整個元素都看不清楚就可以使用 backdrop-filter 因為他只會影響背景圖片，很適合處理這種文字壓在圖片上面的效果