Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 9 節： Other Assorted Useful CSS Properties
###### tags: `CSS` `Udemy` `The Web Developer Bootcamp 2021`
2021.05.04（Tue.）
## ● 上課筆記
### （1）**opacity & the alpha channel：**
一般來說我們用顏色就是用rgb，然後給一組三個數字。但也有一個顏色用法叫做rgba，此組給四個數字，r是紅、g是綠、b是藍、a是alpha，算是透明度。

可以在hex color的6碼後加上兩個英數字調整透明度，也可以直接在css中新增一個「opacity: 數字;」。

常用三種方法：
**1. rgba**

#rgba{
    background-color: rgba(255,255,255,0.7)
}

**2. hex color**

#hex-color{
    background-color: #00cca0b9
}

**3. opacity**

    background-color: yellow;
    opacity: 0,7;

****
### （2）**position property：**
**1. static**
沒有設置任何參數時，position就會等於static（預設是static）。這個時候`top`、`right`、`bottom`、`left`還有`z-index`屬性皆無效。
**2. relative**
除非我們加上一些屬性（像是`top`、`right`、`bottom`、`left`），不然他的表現跟static是一樣的。而加上一些屬性後，元素會相對地調整原本該出現的所在位置。
**3. absolute**
元素會被移出正常文件流，所以不會給元素預留空間，也可以說被設定absolute後，該元素在頁面上是不占任何空間的。
另外，他會通過指定元素相對於最近的非 static定位父元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合併。
**4. fixed**
跟absolute一樣元素會被移出正常文件流，不同的是元素的位置在屏幕滾動時不會改變。（可以用在導覽列上）
**5. sticky**
元素會根據正常文件流進行定位，但他跟fixed有點像，一般來說他看起來相當正常，但當屏幕滾動時，被設置為sticky的元素碰到頁面邊緣，並不會消失，而是像fixed一樣不會改變（差別只在fixed都卡在同個位置，但sticky唯有在即將出去頁面時才會卡在某個位置上）
****
### （3）**CSS transitions：**
* 他是用於轉場動畫的一個語法，先來看看語法：

transition: property name | duration | timing function | delay

* 再來針對他的屬性來做細說：
**1. property name**
例如說你要針對背景顏色去做變化，那property name就可以放上background-color（或者說border-radius、border、color等等都是property name）
**2. duration**
這個就是指說你要達成那個狀態需要多少的時間？通常都用秒當作單位。
**3. timing function**
可以說是那個動畫的速率變化，可以參考[這個網站](https://easings.net/)。
**4. delay**
這裡一樣是時間，但跟duration不一樣，他是設定說經過多少時間再做動畫。
****
### （4）**CSS transform：**
> 參考網址：[`<transform-function>`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function)

transform可以讓你修改CSS可視化格式模型的空間維度。
例如：平移、旋轉、縮放和傾斜。
**1. rotate**
在二為平面中，以某個固定的點做旋轉：

rotate(angle)

若想更改固定的點的位置，則使用以下語法：（原先設在center）
下面範例表示將固定的點移至右上角。

rotate-origin: top right;

**2. scale**
在二維平面上放大or縮小物件：
下面範例表示把物件放大了兩倍。

scale(2)

**3. translate**
在二維平面上做平移。

translate(x,y)

**4. skew**
在二維平面上，使物件傾斜變形。

skew(x-angle,y-angle)

****