CSS 動畫與視覺美學

標準語法

• properties (屬性)
• selectors (指標)

在 HTML 文件加入 CSS 設計

• 參照外部獨立 CSS 檔
• 加入 style 元素
• 使用元素的 style 屬性

Type selector (型式指標)

背景色屬性 background-color

Box Model

• margin, border, padding, content
• 區域水平置中。

ID selector (ID 指標)

Class selector (Class 指標)

圓角設計

• border-radius

半透明設計

• rgba(), hsla()
• opacity
• 半透明背景色的設計

Pseudo-class selectors (擬類別指標)

• 使用者互動
  • :hover, :focus, :active
• 位址
  • :link, :visited
  • :target

陰影及光暈立體視覺效果設計 - 不需靠繪圖軟體

• box-shadow
• text-shadow

多層次背景圖與插圖、桌布拼圖設計

• background-image
• background-position
• background-attachment
• background-origin
• background-size
• background-clip

藝術裱框設計

• border
• border-image

Pseudo-class selectors (擬類別指標)

• 樹狀結構型 (Tree-Structural pseudo-class)
  • :nth-child(), :first-child, :last-child
  • :nth-of-type(), :first-of-type, :last-of-type
  • :empty

交替變換設計

• 純 CSS 隔行變換樣式

Sibling combinators (旁系組標)

• Adjacent sibling combinator (+)
• General sibling combinator (~)

互動式變換設計

• 滑鼠或鍵盤動作變換設計
• 填表元素變換設計
• 隱藏 / 顯現變換設計
• 純 CSS 下拉選單設計

Pseudo-element selectors (擬元素指標)

• ::before, ::after
• ::first-letter, ::first-line

在主題前後加入符號或圖示

• html li 元素項目前面符號
• 圖示一次加入所有主題
• 首字樣式設計

Box 的旋轉、縮放、傾斜

• transform
• 3D 立體變化效果。
• 環狀選單設計

Gradients 漸層上色 - 不需靠繪圖軟體

• linear-gradient() 線性漸層
• repeating-linear-gradient()
• radial-gradient() 放射狀漸層
• repeating-radial-gradient()
• 立體視覺效果的設計。
• 反射效果的設計。

動畫變換效果

• transition
• 動畫視覺效果的設計。
• 動畫選單的設計。

動畫設計

• animation
• 動畫設計。

media query

• 順應不同設備的設定 (responsive) 。
• @media
• html media 屬性

Pseudo-class selectors (擬類別指標)

• 語言
  • :lang()
• 邏輯組合
  • :not()
• 填表介面
  • :enabled, :disabled
  • :checked

註：粗體等寬字表示未正式發布的 CSS 3 最新探究。

學習資格

• 能閱讀 html 網頁語法，不會寫沒關係。→ 瞧瞧 HTML 課程
• 能閱讀簡單英文單字。
• 有空間概念。
• 有 CSS 排版概念更好。→瞧瞧 CSS 排版課程

應用範圍

• 網頁設計、雲端應用程式 (App) 。
• 部落格模版設計。
• 行動裝置應用程式 (App) 。
• 電腦應用程式。

教學示範

1. css 玩網頁特效
2. css 動態視覺狂想曲
3. css 3D 動畫
4. css 視覺冥想

相關證照

• w3schools CSS Developer Certificate

觀摩網站

1. CSS Zen Garden

更新日期： 2013-11-6