透過 Vite 客製化 Bootstrap：打造你的專屬樣式
Bootstrap 是廣泛應用的前端樣式框架。一般情況下，我們可以直接使用它提供的所有功能。然而，在某些特殊專案中，你可能只需要 Bootstrap 的部分功能，例如，只需要它的自適應網格。那麼，如何根據需求自訂 Bootstrap 呢？
透過 Vite 客製化 Bootstrap：打造你的專屬樣式 Read More »
css
CSS 容器查詢單位 cqi
其實 cqi 的使用方式有點類似 rem 與 em 的關係。
當我們設定了 rem，就可以知道一個 em 實際是多少；當網頁需要調整整體比例時，只需要改動 rem 的值，就能讓所有使用 em 的元素跟著連動變化，維持一致的比例。也就是說，你可以簡單地將 cqi 理解成「容器內的 root 單位」
比女朋友還善變的 clamp()
在處理自適應網頁的設計中，常常會遇到類似的畫面需求，我們希望字體的大小可以隨著螢幕尺寸自動變換，以滿足用戶在不同設備的閱讀體驗。遇到這種情況我們通常會使用到 vw（viewport width，可視區佔比）的單位，讓字體大小可以隨著視窗寬度變化。
CSS 寫入模式 writing-mode
一直覺的 CSS 是種很有生命力的語言，總能三不五時挖掘出新的功能，豐富我們對 Web 的想像力。
最近到 W3School 查詢標籤的用法，意外看到 writing-mode，有種相見恨晚的感覺。對網頁設計師來說，畫面的安排無非由點、線、面依次推導，內容因為文化的關係會有不同的表現方式。
CSS 寫入模式 writing-mode Read More »
VISUAL STUDIO CODE 初心者設定指南
一般來說，剛安裝好的 Visual Studio Code 就已經相當完整，內建 emmet、各種常見語言的色彩標示、程式碼折疊、所在行標示、HTML & CSS 語法及屬性的下拉選項、支援 Markdown 等等…對一個網頁設計師來說，如果沒有特別的需求，幾乎可以馬上用來開發。話說如此，但總還是有一些小細節不是那麼完美，就像買了最潮的球鞋，裡頭卻有顆小石頭，穿起來總是刺腳。所幸 Visual Studio Code 提供極為豐富的設定，幫助你打造屬於自己的編輯器。下面有一些我們推薦的設定，讓你的 Visual Studio Code 不只是潮，用起來更是舒適。
VISUAL STUDIO CODE 初心者設定指南 Read More »
網頁設計師必學的五個 CSS 動畫庫
俗話說，工欲善其事必先利其器，對現在的網頁設計師來說，為畫面增加一些微互動的動態效果已經是時勢所趨，但 CSS 不比 Flash，需要透過 Code 的方式才寫出動態的效果，對很多視覺設計師來說是一道門檻，所幸網路上已經有很多資源將類似的動畫需求整合起來，只需要用點心去尋找，就可以找到許多功能強大的 CSS 動畫庫，下面我們挑五個比較有名且實用的來介紹。
網頁設計師必學的五個 CSS 動畫庫 Read More »
