# Google 教你 CSS 023 ~ 028
###### tags: `HTML, CSS`
# 023 Blend Modes
> 使用多層的效果來製造 compositional effects ，以及學會如何操作使用白底來隔離出圖片
Duotone 是一種雙色調的調色方式，是可以透過本章的方法達成的
## What is a blend mode?
用來創造 compositional effect 是一種混合兩種或是以上的顏色疊層的效果，藉著顏色的混合可以創造出非常有趣的視覺效果，也可以把它當成是工具使用達到類似去背的效果
兩個主要的屬性
* mix-blend-mode
* background-blend-mode
差異在於前者作用於整個元素，而後者則指作用在 background 上
background-blend-mode 更是主要處理複數的 backgounds 同時在一個元素上面並且要有交互作用時可以使用製造出多張圖片同時疊在一起並且交互影響的效果
mix-blend-mode 則作用整體元素因此連 pseudo-elements 都會作用上去
這邊讓兩種對比顏色 hotpink 以及 navy 作用於圖片上達到 duotone 的效果
```css=
.duotone::after {
background: hotpink;
mix-blend-mode: multiply;
}
.duotone::before {
background: navy;
mix-blend-mode: lighten;
}
```
Blend modes 有兩大種類 separable and non-separable ，主要差異在於考慮顏色上面前者考慮顏色為個別的，後者則考慮為都一樣
## Separable blend modes
### Normal
這是 default 屬性，不會改變元素混合的狀態
### Multiply
這個效果就像是作用了很多層透明的疊層上去修飾的元素上，白色的像素變得透明，黑的則是越黑，在其之間的顏色則是增加亮度 luminosity ，簡單來說就是亮的越亮，暗的越暗，但比較常見的情況是變暗的結果
```css=
.my-element {
mix-blend-mode: multiply;
}
```
### Screen
```css=
.my-element {
mix-blend-mode: screen;
}
```
此屬性會使 light 屬性加成，以及倒反 multiply 的效果，一般會造成較明亮的結果
### Overlay
```css=
.my-element {
mix-blend-mode: overlay;
}
```
combines multiply and screen 一樣會造成亮的越亮，暗的越暗，不過 50% gray 會直接沒有效果
### Darken
此屬性會比較來源圖片以及背景色並從中分別選出較黑的
```css=
.my-element {
mix-blend-mode: darken;
}
```
### Lighten
與 darken 相法
```css=
.my-element {
mix-blend-mode: lighten;
}
```
### Color dodge
此屬性會加亮背景色來反射出 source color ，黑色在此處沒有效果
```css=
.my-element {
mix-blend-mode: color-dodge;
}
```
### Color burn
跟 multiply 很像，但增加對比 並且 mid-tones 的顏色會更增加對比度並且減少亮度
```css=
.my-element {
mix-blend-mode: color-burn;
}
```
### Hard light
可以創造出很生動的對比度
如果 pixel value is lighter than 50% gray 則效果像是使用 screen
如果 pixel value is darker than 50% gray 則效果像是使用 multiply
```css=
.my-element {
mix-blend-mode: hard-light;
}
```
### Soft light
跟 overlay 很像，不過比較弱一點，對比度較低
```css=
.my-element {
mix-blend-mode: soft-light;
}
```
### Difference
反轉所有明亮的顏色
```css=
.my-element {
mix-blend-mode: difference;
}
```
### Exclusion
會使所有 50% gray 的色彩較少的對比度
```css=
.my-element {
mix-blend-mode: exclusion;
}
```
## Non-separable blend modes
### Hue
把背景的色彩飽和度以及亮度混合進去修飾的元素的色彩中
```css=
.my-element {
mix-blend-mode: hue;
}
```
### Saturation
把背景的色彩以及亮度混合進去修飾的元素的飽和度中
```css=
.my-element {
mix-blend-mode: saturation;
}
```
### Color
創造出顏色來自：顏色以及飽和度來自修飾的元素，亮度來自背景
```css=
.my-element {
mix-blend-mode: color;
}
```
### Luminosity
是整個 color 屬性的到反過來：亮度來自修飾的元素，顏色以及飽和度來自背景
```css=
.my-element {
mix-blend-mode: luminosity;
}
```
## The isolation property
isolation 屬性使用的下去之後會讓修飾的元素被隔離出來，創造出一個 stacking context ，意味著其他元素不會影響到其內層的元素了，只有外層影響外層，利用這個效果來取消 blend-mode 來達到做出去背的效果
原本使用的 blend mode 是 multiply
使用 js 修改為 isolate 就取消了 blend mode 的效果直接變為白色
# 024 Lists
> 在本章中學習如何修飾 lists
## Creating a List
```html=
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
```
以這樣子的 list 來說他會 default 使用
```css=
li {
display: list-item;
}
```
並且 render 的時候會使用 `::marker` 修飾每個 li
還有另外兩種 list
ol:
`::marker` 的部分會由數字呈現
```html=
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
```
dl:
這個 list 比較特別，他沒有使用 li
```html=
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
```
## List Styles
主要使用下面三個屬性來修飾 Lists
* list-style-position
* list-style-image
* list-style-type
### list-style-position
主要有兩個值，inside/ outside 也就是 marker 的位置會在 li 內或是外 (default 是 outside )
### list-style-image
可以取代掉 bullet 成圖片使用 url 來達成( svg, gif )，不過這個屬性的缺點是對於 position, size 的控制選項比較少，如果在這部分有需求還是推薦使用 `::marker` 來做到
### list-style-type
可以接受的值：
[超多只好引入 MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) ，不過常用的是 style 關鍵字或是 emji、字串等等
### list-style shorthand
縮寫起來的順序如下：
```css=
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
```
如果 list-style-type 以及 list-style-image 都有設置的話，則 list-style-type 會被設置為 image 的 fallback 選項，如果 image 失效的話
```css=
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
```
## ::marker pseudo
::maeker 的部分
一般的 browser default 設置
```css=
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
```
需要注意的是部分功能有受到限制在 safari 中
### Marker Box
基本上就是透過 `::marker` 選取 Marker Box 來做修飾而不是選取整個 li
需要注意到的地方是 `::marker` 在優先級上面超過所有已經被加上的 pseudo-elements 例如： `::before`
### Marker Styles
可以在 `::marker` 操作的 css 屬性
* animation-*
* transition-*
* color
* direction
* font-*
* content
* unicode-bidi
* white-space
```css=
--content: '🥕~';
--color: #ffffff;
--font-size: 1rem;
--animation: 3s infinite alternate color-change;
```
## Display Type
前面都是在 li 的狀態下修飾，其實在其他的元素下也可以修飾喔！
這邊是直接把 h1 的 display 改為 list-item 就可以套用 `::marker` 來修飾摟！
不過這種狀態下的元素不會被 screen reader 解讀成 list 而是他原本的元素，所以還是建議可以的情況下還是盡量使用語意化的 tag
# 025 Transitions
> 在本章節中學習如何定義元素狀態中的 transitions，提供更好的視覺反饋給使用者
## Transition properties
### transition-property
使用此屬性來指定哪個 styles 去做 transitions
可以指定一個或是多個 styles 使用逗號來區隔
可以選用 transition-property: all 來修飾所有的 styles
```css=
.my-element {
transition-property: background-color;
}
```
### transition-duration
用來定義 transitions 的長度
參數接受 s, ms, default 值為 0
### transition-timing-function
用來變化在 transition-duration 區間下 transistion 的速度
`transition-timing-function: linear` 為預設值會均速地完成 transitions ，不過其缺點是看起來不太自然，使用 ease 等屬性，會讓元素在開始以及結束會有一點點頓挫會比較自然
[可以從 codepen 看效果](https://codepen.io/web-dot-dev/pen/QWgdyZx)
### transition-delay
定義 transitions 開始的時間，如果沒有定義則會立即開始，參數接受 s, ms, default 值為 0 ，這個屬性可以用來做出階段式出現的[特效](https://codepen.io/web-dot-dev/pen/yLXgeRQ)
### shorthand: transition
```css=
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
```
## What can and can't transition?
判斷 css 能否使用 transition 取決於是否有中間的 state ，像是 font-family 就不可能使用因為在 serif and monospace 字型之間又怎麼會有中間 state 呢？ 但 font-size 就很容易想像其中間的 state 10px~12px 之間就是 11px 摟
[Animatable CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
以下介紹一些常用到 transition 的屬性
### Transform
這個屬性操作 scale, rotate, translate, or skew an element
### Color
color, background-color, and border-color properties
### Shadows
常常用來操作當 user 碰到物件後浮起來的特效
### Filters
filters 可以創造 graphic effects on the fly 搭配 transition 可以做到更自然的效果
## Transition triggers
一般都會有個事件來觸發 transition 最常見的使用 hover 時觸發
* :hover
* :focus
* :focus-within
* :target: matches when the current URL's fragment matches the element's id.
* :active: matches when the element is being activated (typically when the mouse is pressed over it).
* class 這邊指的是從 js 控制 class 改變時，作用的元素就可以觸發 transition
## Different transitions for enter or exit
* 針對 my-element 的 styles 是修飾結束 transition 狀態要回復回去紅色 background
* 針對 hover 效果的 styles 則是開始 transition 狀態要變藍色了的 background 的效果
```css=
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
```
## Accessibility considerations
這邊是針對使用者偏好可以做出調整，如果使用者偏好頁面的動畫減少的話，則寫在 @media (prefers-reduced-motion: reduce) 內的動畫動作就會減少
如果 @media (prefers-reduced-motion: no-preference) 是這樣子撰寫的話，如果使用者沒有設定偏好的話就會正常執行 transition
```css=
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
```
## Performance considerations
這邊簡單解釋如果 transition 操作在 width / height 這種會擠壓到整個頁面的屬性，會讓整個畫面要重算其他元素的大小的操作會建議使用 transform and opacity 這種 css 函式來操作會有更好的效能
# 026 Overflow
> overflow 屬性是用來修飾超出 parent 大小的內容
有各種 overflow 屬性有些會把內容切到、有些使用 scrollbar 滑動內容、有些會使用 ... 做省略內容、有些會直接超出容器，學習這些屬性在 style 手機上使用非常重要
有兩種屬性：
text-overflow 處理個別單行的文字
overflow 處理 box-model 下的內容
## Single line overflow with text-overflow
要操作 text-overflow 必需要使用在一行沒有換行的文字上，並且設置 overflow: hidden 以及 white-space: nowrap;
```css=
p {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
```
範例使用在 input 輸入格子中，來做到 clip 效果也就是直接把文字剪掉
## Using overflow properties
overflow 屬性會設置在當 child elements 需要更多空間比其 parent elements 提供的還多，但這可以是故意的，比方說 google map ，會把很大張的地圖使用在一個小個區塊中拖曳以及標記，也可能是因應需求比方說使用者在聊天 app 中輸入大量的文字以至於超過了 parent elements 的大小
### Scrolling on the vertical and horizontal axis
* overflow-y
* overflow-x
使用這兩個屬性就可以達到在 parent 元素下滑動 child 元素摟
### Logical properties for scroll direction
使用 overflow-inline and overflow-block 來達成在 inline 或是 block 方向的 overflow
注意 overflow-inline is currently only supported in Firefox 69+. See the support table on MDN.
### The overflow shorthand
基本上 overflow-x 使用第一個值 overflow-y 使用第二個，或是共同使用一個值
overflow: hidden scroll;
#### Values
* overflow: visible (default)
child elements 不會被刻意隱藏
* overflow: hidden
child elements 會被隱藏並且沒有 scrollbar
* overflow: scroll
child elements 會出現 scrollbar 儘管目前內容沒有 overflowing
* overflow: clip
跟 hidden 很像不過在禁止更多東西像是 scrollbar 以及 JS 產生的 scrollbar
* overflow: auto
最常用的屬性，同時套用使用者的偏好以及 scrollbar
## Scrolling and overflow
### Scrollbar positioning within the box model
這邊要解釋的就是 scollbar 會在 box-model 裡面佔據空間的
### root-scroller vs implicit-scroller
簡單來說就是在 documentElement 上面的 scroll 就是 root-scroller 如果在內部在做一個 scroller 就會是 implicit-scroller 然後你操作在 root-scroller 的 stlying 並不會作用在 impilict-scroller 上
[操作範例](https://cdpn.io/web-dot-dev/debug/dyzPzwz)
### scroll-behavior
主要針對滑動行為做修飾 auto 會使行為比較快速，而 smooth 則會比較滑順
也可以操作在 @media 中，根據使用者偏好去做設置
```css=
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
```
### overscroll-behavior
overscroll-behavior 這個屬性操作在使用 model 打開彈窗時捲動內部的內容，當卷到底或是頂時，則其 parent 會開始滑動或是被鎖死主要是在操作這個地方
使用 none 會變成背景不會滾動
使用 auto 則是背景可以滾動
使用 containe 則是會包含著 model 的大小可動而不是整個 parent 背景都可動
[操作範例](https://codepen.io/web-dot-dev/pen/powqJQe)
# 027 Backgrounds
## Backgrounds
可以從下圖看到 css 有非常多層次，從 padding-box 一直到 shadow-box ，background 排位相當的深，如此一來就不會蓋掉在其之上的其他層的內容
## Background color
color 是你可以在 background 上面做的最簡單的 styling ，background-color 的初始值為transparent
## Background images
支援以下值
* image url
* data url
* gradient 產生的 image
### url
### gradient
## Repeating background images
background-image 的預設值為垂直水平都會不斷重複直到填滿 background layer 為止，不過可以藉由修改 background-repeat 的值來做到修改：
repeat 為預設值，會在有效的空間內重複直至填滿，圖片會被修剪來符合容器邊框
round 一樣會水平垂直重複製填滿空間，差異在於圖片不會被修剪、擠壓、延伸
space 一樣會水平垂直重複製填滿空間，差異在於圖片不會被修剪之外，每個重複的圖片周圍會有固定的 margin 來區隔彼此
### shorthand
可以使用兩個值來當作縮寫，第一個代表水平 x 軸，第二個則是垂直 y 軸
```css=
background-repeat: repeat no-repeat;
```
也可以使用下面的寫法來作為縮寫，效果跟上面的一樣
```css=
background-repeat: repeat-x;
```
如果只使用一個值則會作用在兩個軸
## Background position
可以用此屬性來修改圖片在 background 中的位置，其預設值為 top left 左上
```css=
// 正確寫法
background-position: left 50%;
background-position: top left;
background-position: left top;
// 錯誤寫法
background-position: 50% left; // 關鍵字的使用必須在前面
background-position: left right; // 不能操作都在同一軸
```
其實此屬性最多可以接受四個參數使用：top, left, right, or bottom keywords
其操作的方式為 如果寫法像是 background-position: bottom 88% right 33%;
則代表 操作在 bottom 88% 的位置以及 right 33 % 的位置的意思
```css=
//Do
background-position: bottom 88% right;
//Do
background-position: right bottom 88%;
//Don't
background-position: 88% bottom right;
CSS length value must be preceded by the top, right, bottom, or left keywords when using three or more parameters.
//Do
background-position: bottom 88% right 33%;
//Do
background-position: right 33% bottom 88%;
//Don't
background-position: 88% 33% bottom left;
CSS length value must be preceded by the top, right, bottom, or left keywords when using three or more parameters.
```
## Background Size
可以用這個屬性來調整 background image 的大小，預設值是 image 本來的大小
1. auto: 會是原本 image 的大小，單一使用在 width, height 也是一樣
3. cover: 涵蓋整個容器區域，代表 image 有可能會延伸並且只有一張
4. contain: 涵蓋整個容器區域但是不會延伸以及有可能很多重複，但因為不會延伸有可能出現空白區域所以會透過 repeat 的方式來填滿，除非 background-repeat 的屬性設置 no-repeat
## Background attachment
這個屬性會影響 background image 的位置行為 scroll, fixed, and local 透過這三個關鍵字
default 行為是 scroll 也就是正常呈現在頁面中
使用 fixed 屬性則會呈現一種窗口看大圖的感覺
[demo](https://codepen.io/web-dot-dev/pen/MWoozvN)
使用 local 屬性會讓圖片能夠隨著佔據的空間移動
[demo](https://codepen.io/web-dot-dev/pen/WNExZmK)
## Background origin
是指 background 如何跟容器連結的方式：
* 可以看到如果使用 border-box 就會佔據整個容器，包含 border, padding
* 使用 content-box 則只使用到 content 區塊
* 使用到 padding-box 則會不佔用到 border 區塊
## Background clip
跟 origin 不同的是，使用 clip 會裁減到多餘的部分
使用 text 屬性做到文字剪影的效果
```html=
<div id="demoAndCodeSnippetBox">
<div id="demoBox">CSS</div>
<div id="keywordPanel" class="configuration-panel">
</div>
</div>
</div>
```
需要特別注意這個屬性比較新，要特別注意瀏覽器相容性的問題
## Multiple backgrounds
```css=
background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;
```
像上面的範例就是使用了兩個圖片 url 加上一個 gradient 來做出這張圖片，要記住的是只有最後一層的 background 才可以上 backgroun-color （或是只有一層）
定義圖片的順序也必須注意，第一個定義的 background-image 會離使用者最近，最後一個則最遠
## The background shorthand
上方 mutiple backgrounds 的圖片的 css 可以改寫成一整條縮寫
```css=
// 縮寫順序
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
```
```css=
background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;
```
# 028 Text and typography
這個章節會從 font-family, font-style, font-weight, and font-size 這些基礎屬性開始講起，接下來講解段落會使用到的屬性 text-indent and word-spacing 最後階段則會帶到 variable fonts and pseudo-element
## Change the typeface（字體）
一般會有兩種
Specific font
會以引號來包起來
`“Helvetica”, “EB Garamond”, or “Times New Roman”`
Generic font (通用字體)
會以關鍵字型態使用
`serif, sans-serif, and monospace`
[MDN__font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values)
font-family 使用的方式是逐個字母檢視是否支援字體，如果沒有則會從 font-family 設定的值往下取，直到取到為止
比方說
當前方的字母不被 "Helvetica" 字體支援時，後方的 sans-serif 通用字體 （Generic) 就會補上
```css=
.ff-fallback-demo {
font-family: "Helvetica", sans-serif;
}
```
注意 **作為替補的字體通常都會跟前方的字體類似，並且使用通用字體 （Generic）**
## Use italic and oblique fonts
> 使用 font-style 來決定字體為斜體或是正常，其值可以使用 normal, italic, and oblique
## Make text bold
使用 font-weight 來決定字體粗細，他可以操作值 像是關鍵字 normal, bold = 400, 700/ lighter, bolder 基於其父母來比較[參閱這邊](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights)/ 數字形式
特別注意一般 font-weight 只接受 100 的倍數，如果想要寫出特殊的數值就必須使用 variables font ，在本章節後面會講到
## Change the size of text
> 使用 font-size 來決定文字大小，使用的值可接受 長度、百分比、關鍵字等等
關鍵字的部分可以接受：
xx-small, x-small, small, medium, large, x-large, xx-large
基於其父母元素的 font-size 大小的關鍵字使用
smaller, larger
### em and rem 的不同
em 會基於元素的父母元素來決定大小，簡單來說如果給當前元素設定 2em 代表，當前元素大小是父母的大小的兩倍
rem 操作方式跟 em 很像，不過它的基準改變為整個 html 也就是 root element
## Change the space between lines
> 用 line-height 來控制行高，可以使用的值有 長度、數字、百分比、關鍵字 normal 一般推薦使用數字避免長度或是百分比因為會造成一些繼承 parent 的問題
## Change the space between characters
> 使用 letter-spacing 控制水平方向字母間的間隔，可以操作的值如：長度 em, px, and rem
## Change the space between words
> 顧名思義使用 word-spacing 是控制單字之間的距離，可以操作的值如：長度 em, px, and rem
## font shorthand
可以操作以下屬性來做簡寫，其規則比較複雜可以參考 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font#syntax)
font-family, font-size, font-stretch, font-style, font-variant, font-weight, and line-height.
## Change the case of text
> 使用 text-tranform 來改變文字大小寫，不用修改 html 可以接受的值：uppercase, lowercase, and capitalize
## Add underlines, overlines, and through-lines to text
使用 text-decoration 來給文字加上裝飾，例如底線、刪除線、頂部線
text-decoration-color 可以定義顏色
text-decoration-line 可以定義線的位置
text-decoration-tyle 可以定義線的類型
text-decoration-thickness 可以定義線的粗細
text-decoration 是其上面的縮寫
text-underline-position 可以定義 underline 的絕對位置，但不能操作在 overline or line-through
## Add an indent to your text
> 使用 text-indent 來控制一整個區塊的縮排，可以操作的值有長度、百分比
## Deal with overflowing or hidden content
> text-overflow 可以決定當文字超出容器大小時的表現
使用 clip 會直接刪去多餘的文字，使用 ellipsis 則會顯示點點點
## Control white-space
使用 white-space 決定空格的使用方式，更詳細的可參考 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
比較特別的地方是如果文字上面有操作到 ASCII art or carefully indented code blocks 時可以使用 white-space: pre
## Control how words break
> 使用 word-break 來決定當換行時，文字被拆分的方式，預設為 normal
## Change text alignment
> 使用 text-align 操作文字水平方向的排列
start and end 可以使其更具有通用性因為更能符合 011 Logical Properties 的理念
## Change the direction of text
> 使用 direction 來決定文字書寫方向 direction: rtl or ltr
要特別注意的是，如果真的要操作文字書寫方向還是更推薦使用 HTML attribute `dir` 屬性
## Change the flow of text
使用 writing-mode 來決定整體文字的方向，預設為 horizontal-tb
## Change the orientation of text
使用 text-orientatation 來操作字母的轉向，這個屬性只有當 writing-mode 不是 horizontal-tb 的時候才會有需要
## Add a shadow to text
> 使用 text-shadow 來操作文字的陰影，可接受的屬性 (x-offset, y-offset, and blur-radius) and a color
## Variable fonts
一般來說要改變字體得引入各種字型來做到，不過使用 Variable fonts 可以直接做到
[參考位置](https://web.dev/variable-fonts/)
## Pseudo-elements
### ::first-letter and ::first-line pseudo-elements
> 這兩的屬性的操作非常直接就是第一個字母跟第一行
## ::selection pseudo-element
使用 ::selection 來操作滑鼠選取文字的效果
可操作在上面的屬性：
color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.
Sign in with Wallet
Connect another wallet