鐵人檔案
這系列文章記錄自己在開發中，面對各種視覺與 UI 需求時的實作經驗。內容涵蓋 CSS Grid 雙軸響應式、SVG 向量應用、DOM 動態特效與主題切換。
大家好，我是 Tanuki，轉職上岸一年的前端工程師。 過去一年可以說是匆匆忙忙、連滾帶爬。專案中，經常碰到使用沒寫過的寫法、沒有處理過的需求。雖然透過 AI...
回想拿到某個專案時，一邊看一邊驚嘆。 ( ･∀･)σ < 全部頁面都是滿版畫面喔！ Σ(ﾟдﾟ ) ( ･∀･)σ &l...
昨天我們將格線畫好，接下來在格線基礎上，加上更多的變化。 如果版面單純，子元素由左到右，一個蘿蔔一個坑，那把格線畫完就可以了。不過，來都來了，看看如何透過更多屬...
還記得 Day 02 提到要將網頁做得像全頁 APP 的樣子嗎？今天來一步步實作看看吧！ 滿版設計 版面確認 在這張設計稿模擬圖中，可以看到這個頁面的元素分成...
單看標題，是不是會想這有什麼好講的？就在圖片加上 width: 100%; height:100%; object-fit: cover 不就好了。 是這樣沒...
第一次注意到 SVG，是設計稿中使用到 Iconify Design 的 icon。在操作面板調整 icon 的顏色、大小的時候，發現 SVG 碼會有對應的變化...
SVG 最常應用在 icon 上，不只因為它是向量圖，icon 也很常出現在按鈕等互動元素中，會隨著狀態改變樣式。試想一下，如果每一種狀態的 icon 都要從設...
昨天介紹的 fill 與 stroke 只能處理單色，不免讓人覺得拿 SVG 設定 icon 有點殺雞焉用牛刀。別急別急，今天就是分享如何在 inline S...
還記得 Day 06 的標題 – 「我把圖片內嵌在 HTML 了！」嗎？沒錯，SVG 能像 HTML 標籤一樣拆開來寫。以此類推，我們也能在前端框架的 HTML...
之前接到製作進度地圖的任務，地圖上有個不規則的曲線，以及代表步驟的數個點。我不疑有他，匯出一張帶有曲線的圖片當底圖，再直白地用 position、top 與 l...
