[Back To Basic] CSS var()

宣告變數

在 CSS 中宣告變數的做法

• 區域變數
• 在 selector{} 中直接宣告，有效範圍就在這個 selector 中

• 全域變數
• 在 :root{} 中宣告
• 在 body{} 中宣告

*. 變數語法: --variableName

*. 變數名稱的大小寫不同，視為不同

var(variableName, value)

• variableName: 變數名稱
• value: 備用值(指定變數值無效時使用)

source code

[Back To Basic] CSS User Interface

User Interface

• resize

容器有調整大小的功能，這個屬性可以控制水平縮放或垂直縮放

可選擇的屬性值:

• horizontal
• vertical
• both
• none

*. 若瀏覽器預設<textarea>有resize的功能，可以用none關閉

• outline-offset

增加 outline 和 border 中間的空間

• outline 不屬於 element 的一部分(outline 和 element 不在同一個維度)
• outline 可能會覆蓋其他內容
• element 的寬和高，不被 outline 寬度影響

source code

[Back To Basic] CSS object-fit

object-fit

指定圖片、影片，適應容器的模式。

• fill 

填滿容器，視情況放大或縮小(圖片、影片會被壓縮或拉長)

• contain

以容器的大小為主，保持長寬比，填入圖片、影片(圖片會變小)

• cover

保持長寬比，但是會裁減圖片

• none

無適應能力(不會放大縮小)，無視容器

• scale-down

none 和 contain 取二者中較小

source code

[Back To Basic] CSS 圖片樣式

可搭配的屬性

• 圓角: border-radius
• 邊框: border
• 留白: padding
• 陰影:box-shadow
• 透明度: opacity
• 濾鏡: filter

可搭配的狀態

• hover

RWD

• 最大寬度: max-width

置中

{

  width: 50%; /* 可以調整 */

  display:block;

  margin-left: auto;

  margin-right: auto;

}

source code

[Back To Basic] CSS Tooltip

Tooltip

在滑鼠移到某個元素上時，給予額外的資訊。

用純css做出tooltip。

source code

[Back To Basic] CSS Animations

使用純 css 做動畫。

Animations

• 可讓元素從一個樣式逐漸改變成另一個樣式
• 很多 css 屬性皆可應用
• 動畫次數可指定
• 影格的概念很重要

@keyframes

@keyframes 影格名稱 {

  from {

    background-color: yellow;

  }

  to {

    background-color: blue;

  }

}

• 從from變化到to
• 綁定影格到元素上

animation-name: 影格名稱;

• 指定影格總秒數

animation-duration: 秒數; (預設為0秒，所以沒有設定就不會有動畫)

animation-delay

• 動畫延遲n秒後開始
• 可以是負值

animation-iteration-count

• 動畫執行的次數 e.g. 1 2 3...
• 無限: infinite

animation-direction

指定動畫的方向

• normal(預設值): 向前
• reverse: 倒轉
• alternate: 先正常播放後倒轉
• alternate-reverse: 先倒轉後正常播放

animation-timing-function

速度曲線

• ease(預設值): 慢 快 慢
• linear: 中 中 中
• ease-in: 慢 中 中
• ease-out: 中 中 慢
• ease-in-out: 慢 漸快 漸慢 慢
• cubic-bezier(n,n,n,n): 自行指定貝茲曲線，決定速度

animation-fill-mode

在影格沒有播放時，可指定一個樣式

• none(預設值)

無任何樣式

• forwards

保留最後一個影格的樣式

• backwards

保留第一個影格的樣式

• both

遵循 forwards 和 backwards 的規則，延展動畫的屬性值

animation(縮寫)

動畫名稱, 動畫總時間 速度曲線 動畫延遲 動畫次數 動畫方向 動畫填滿模式 播放狀態

name duration timing-function delay iteration-count direction fill-mode play-state;

source code

[Back To Basic] CSS Transitions

Transition

指定過場時間，讓屬性時改變的時候更平順。

先決條件

• 決定過場的屬性 e.g. color, width...
• 決定過場的時間 e.g. 2s

*.如果沒有決定過場的屬性，不會有過場的效果，因為過場的時間預設為0秒

*.可以同時指定2個以上要過場的屬性

速度曲線

語法: transition-timing-function

可指定的屬性值，過場簡略分為三部分，開始 / 過程 / 結束

• ease(預設值): 慢 快 慢
• linear: 中 中 中
• ease-in: 慢 中 中
• ease-out: 中 中 慢
• ease-in-out: 慢 漸快 漸慢 慢
• cubic-bezier(n,n,n,n): 自行指定貝茲曲線，決定速度

延遲過場

語法: transition-delay

其他

*.過場(transition)和變形(transform)可以並用

source code

[Back To Basic] CSS 3D Transforms

3D transforms 和 2D transforms 的概念很像，就是說了第三個維度。

source code

[Back To Basic] CSS 2D Transforms

CSS transform

可以對元素做以下操作

• 移動
• 旋轉
• 縮放
• 傾斜

語法

• transform
• -ms-transform: IE9
• -webkit-transform: Safari 9

方法

• translate()

移動元素: 從目前位置移動指定的 x, y值

• rotate()

旋轉元素: 旋轉指定的角度

• scale()

縮放元素: 依據指定的參數倍數縮放

• scaleX()

縮放元素寬度: 依據指定的參數倍數縮放寬度

• scaleY()

縮放元素高度: 依據指定的參數倍數縮放高度

• skew()

傾斜元素: 依據指定的角度傾斜元素

• skewX()

傾斜元素X軸: 依據指定的角度傾斜X軸

• skewY()

傾斜元素Y軸: 依據指定的角度傾斜Y軸

• matrix()

結合以上所有功能，參數: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

source code

[Back To Basic] CSS Web Fonts

Web Fonts

• 可以使用: 沒有安裝在使用者電腦的字體
• 想要使用的字體，可以從server端自動下載至client端
• 關鍵字: @font-face

e.g.

@font-face {

  font-family: myFirstFont; /* 定義字體的名字 */

  src: url(sansation_light.woff); /* 設定字體檔案的來源 */

}

*. url 要用小寫，否則 IE 可能會有問題

字體種類

• .ttf
• mac, windows皆支援
• 所有主流瀏覽器皆支援(ie8不支援, ie9有條件支援)
• 可能有版權問題
• 無壓縮(檔案較大)
• .otf
• mac, windows皆支援
• 所有主流瀏覽器皆支援(ie8不支援, ie9有條件支援)
• ttf的擴充
• .woff
• mac, windows皆支援
• 所有主流瀏覽器皆支援(ie8不支援, ie9有條件支援)
• 有壓縮(檔案較小)
• .woff2
• 並未受到廣泛的支持
• 是woff的加強版，檔案更小
• .svg
• 只支援safari特定版本
• .eot: 微軟開發
• 只支援IE

source code

[Back To Basic] CSS Text Effects

text-overflow

文字超出容器時如何處理

• clip: 直接裁斷
• ellipsis: 刪節號後面省略

word-wrap

"單字"超出容器時如何處理

• break-word: 單字可裁斷

word-break

容器內，語句斷行的規則

• keep-all: 保留每個單字完整
• break-all: 只要超出邊界即裁斷單字

writing-mode

文字的書寫方向，以及水平書寫或垂直書寫

source code

[Back To Basic] CSS Shadow Effects

CSS的陰影效果

共包含二項

• text-shadow
• box-shadow

text-shadow

語法: h-shadow v-shadow blur-radius color|none|initial|inherit;

• h-shadow 水平陰影
• v-shadow 垂直陰影
• blur-radius 模糊邊界
• color 陰影顏色

box-shadow

語法: none|h-offset v-offset blur spread color |inset|initial|inherit;

• h-offset 水平移動
• v-offset 垂直移動
• blur 模糊邊界
• spread 傳播半徑(可增減陰影大小)
• color 陰影顏色

source code

[Back To Basic] CSS Gradients

Gradient 可以讓N種顏色之間的過渡更和緩，漸層的概念。

CSS 有二種 gradients

• linear gradient

語法: background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• 方向: 上到下(預設) e.g. to bottom, to bottom right, to right ...
• 顏色1
• 顏色2
• ...

*. 方向也可用角度取代

e.g.

background-image: linear-gradient(55deg, red, yellow);

*. 也可配合透明色使用

• radial gradient

語法: background-image: radial-gradient(direction, color-stop1, color-stop2, ...);

• 形狀大小位置: 橢圓形 + 平均間隔(預設)
• 顏色1
• 顏色2
• ...

source code

[Back To Basic] CSS Multiple Backgrounds

讓多個圖片在同一個元素中

語法

做法一:
background-image: 圖片來源1, 圖片來源2
background-position: 圖片1位置, 圖片2位置
background-repeat: 圖片1重複方式, 圖片2重複方式

做法二(縮寫):
background: 圖片來源1 圖片1位置 圖片1重複方式, 圖片來源2 圖片2位置 圖片2重複方式

*.用逗號分隔多張圖片

*.來源1 會在來源2上方，以此類推

語法: background-size

可以決定背景圖片的大小，包含兩個特殊值

• contain

背景圖 > 所在內容: 但卻需要將背景圖完整呈現，用contain，使背景圖縮小至內容的大小

• cover

背景圖 < 所在內容: 而背景圖又不適合使用repeat，用cover，使背景圖放大至內容的大小，但此方法容易使背景圖因放大而失真。

*. 也可配合多圖片，用逗號分隔即可

滿版背景圖片

能夠達成以下條件

• 圖片滿版
• 在需要的時候擴展圖片
• 圖片置中於整個頁面
• 不會產生 scrollbar

background: url(img_man.jpg) no-repeat center fixed; 

background-size: cover;

語法: background-origin(位置會受到background-position影響)

指定圖片繪製的起始位置

• border-box

以左上border當起點

• padding-box(預設值)

以左上padding邊界當起點

• content-box

以左上content邊界當起點

語法: background-clip

指定圖片顯示的起始位置

• border-box(預設值)

border之外

• padding-box

padding之外

• content-box

content之外

source code

[Back To Basic] CSS border images

Border Image

CSS可以設定圖片作為元素的邊框

語法

border-image: 圖片來源 切分方式 圖片拼接方式(重複、延展...)

*.圖片會被切分成九份，各自對應角落、四邊及中間

*.一定要設定 border

source code