鐵人檔案
這系列文章記錄自己在開發中，面對各種視覺與 UI 需求時的實作經驗。內容涵蓋 CSS Grid 雙軸響應式、SVG 向量應用、DOM 動態特效與主題切換。
接續昨天的路線圖，今天要讓步驟數量動態平均分布在 SVG path 上，也需要加上一條顯示當前進度的虛線。 事不宜遲，我們開始吧！ 知識點介紹 虛線屬性 在 &...
這個新章節要介紹主題樣式，但我一邊查資料一邊寫，卻越寫越不對勁——寫的方向跟實作內容對不上，所以想先釐清這章要談什麼。 一般談到主題樣式，多半是指深色／淺色模式...
昨天拆解了 Bootstrap 的主題色設定：只要把新顏色加進 $theme-colors 這個 map，就能自動產生 --bs-* 變數和 .btn-*、.a...
昨天介紹了 SCSS 語法，對 SCSS 有了基本的了解。今天就用這些語法寫成主題檔：透過一個色彩 map 產出主題的 CSS 變數，再搭配 theme- 前綴...
昨天用 map 與 @each 組合出各個主題的 CSS 顏色變數，再用這些變數來寫主題樣式。正當我們高高興興地要回城，卻被設計稿的更動 Gank 了：部分主題...
前兩天，我們用 SCSS 處理了主題樣式，不過仍有部分畫面需要依賴圖片，像是帶有造型的按鈕、裝飾零件等。 今天想來清點這些圖片，看看哪些主題的變化，其實是能交給...
前幾天我們用 SCSS、CSS 變數與 inline SVG 整理了主題樣式，能交給程式處理的顏色、按鈕，都盡量交出去了。不過專案裡還是有不少地方，得靠一張張圖...
好耶！今天進入最後一個章節 - 讓網頁動起來。離完賽越來越近，有種雖然還在遠方，但終於看得見終點的感覺！ 今天想先來介紹 transform，一個非常常用，但又...
昨天把 transform 的「畫法」整理完了：位移、縮放、旋轉、傾斜，還有決定從哪個點動的 transform-origin。不過那些都是靜態的，元素只是被擺...
不難發現，前幾天只提到用 transform、opacity、translate、rotate 等來寫動畫。當然 CSS 其他屬性也能做成動態效果，但若寫過多、...
