當超寬表格遇上手機直式螢幕
 |  | 3 |  | 1,266 |
前天跟大家分享了我養的牛牛，很快就接到網友 ycs77 回饋，提到現有介面用手機直式顯示時排版會亂掉且不易閱讀，還幫忙微調樣式發了 PR，好一位充滿行動力的熱血同學，RESPECT! 這些年來，行動裝置客戶端的比例逐年上升，連我部落格這種以工作參考為主的網站，理論上最大客源來自上班遇到茶包爬文(話說...
前端小技 - 免 JavaScript 的刪除確認設計
| | | 2 | | 1,704 |
為了防止使用操作網頁時誤刪或不小心觸發一些不可逆動作，系統規格通常要求刪除前請使用者再次確認。 傳統設計會偏向彈出 Modal 視窗，強迫使用者在【確認/刪除】或【取消】間擇一執行： 圖片來源 我不是很愛這種設計方式，理由使用者在點完【刪除】圖示/按鈕後，畫面會轉換成 Modal 對話框在中央的顯...
Coding4Fun - 也來玩梗圖產生 (CSS + Playwright)
| | | 1 | | 1,511 |
很久沒玩 Playwright 了，找了個題目暖身。 講到自己做梗圖，首推「Meme 梗圖倉庫」的「梗圖產生器」，介面好用素材又齊全，基本上你看過的，想得到的梗圖都做得出來。 正常人其實沒什麼必要花時間自己搞，但我想到梗圖產生器的原理基本上就是在素材底圖指定位置放上自訂文字，理論上用 CSS 不難...
前端雜技 - 滑鼠停留時跳出資訊之純 CSS 解法
| | | 1 | | 2,756 |
手邊有個小需求是想在網頁特定元素加上 Tooltip 效果，滑鼠滑過時能顯示補充資訊。 最簡單的做法是是為元素加上 title ，例如：<a href="#" title="黑暗執行緒部落格 https://blog.darkthread.net">...
復古精簡版 HTML5 動畫進度條 (CSS 圖層混色特效 + 香草自訂元素)
| | | 0 | | 1,538 |
前幾天用 CSS + 自訂網頁元素刻了香草 3D 骰子，好久沒寫前端寫出興趣來，最近有另一個需求是想做上傳進度條。類似的東西十年前做過，當時是用 Knockout.js MVVM。 盤點十年下來我用的前端框架從 Knockout.js 換 Angular.js 再轉到 Vue.js，經歷過兩次砍掉重...
前端小技巧 - 洗巴辣 CSS 骰子動畫/自訂網頁元素/async、await 應用
| | | 4 | | 3,335 |
故事是這樣的，在網路上查到一個很酷的 CSS 3D 旋轉方塊教學： 看到後禁不住手癢，馬上照著刻了一套洗巴辣擲骰子動畫： 嚴格來說，我的 HTML 5 CSS 跟 JavaScript 技能等級只到中上，過去要挑戰這種題目屬越級打怪，少不了爬文地獄加撞牆撞到飽。現在有了 Github Copli...
UI 設計小錦囊 - 20 種差異鮮明色彩組合
| | | 5 | | 2,687 |
寫網頁介面時，有時我會想用多種顏色表示不同類別資料，此時如何挑選一組彼此差異明顯的顏色，差異大到即使同框出現也不致混淆，這批顏色該如何搭配組合是個學問。 面對這個常見的小需求，我 Google 到不錯的建議 - List of 20 Simple, Distinct Colors，為了繪製捷運路線圖...
CSS 動畫練習 - 點擊元素改變背景色再逐漸淡化
| | | 2 | | 1,337 |
想在網頁加上動畫效果，資料表格中在某列資料變化時改變背景色吸引注意，再使用淡化效果恢復原本背景色。 以此目標我設計了一個綜合練習題，在網頁上放五個 DIV，點擊後使用 CSS 動畫效果將背景色改為紫色再逐漸淡化，1.5 秒後恢復原來顏色。若連續點擊同一 DIV，需停止現有動畫，重頭播放。另外，設計一...
CSS 練習 - Checkbox 呈現部分選取狀態
| | | 0 | | 2,703 |
最近遇到的前端小需求，分類項目清單允許使用者勾選整個類別，也可以展開類別勾選個別項目，操作起來類似以下這個樣子： 這種互動操作不難實作，弄個 { Catg: 'FrontEnd', Name: 'Vue.js', Checked: false } 物件模型，拿出 Vue.js 簡單搭一下，插電、開...
CSS 動畫特效大觀園 - Animate.css 自動展示
| | | 2 | | 5,650 |
身為老派全端攻城獅，我對網頁動畫效果的知識前幾年還停在 jQuery fadeIn()、slideDown() 時代，腦中的想像是用 JavaScript 間隔固定時間修改 CSS 樣式數值。這些年見了一點世面，發現前端世界早就變了，現在大家都用 CSS 做網頁動畫。很早之前各家瀏覽器便嘗試內建動畫...
網頁動畫怎麼失效了？作業系統的動畫相關設定
| | | 0 | | 2,247 |
之前讀 Vue.js 3學到好東西，有個開源專案 Animate.css，彙集了五花八門的各式 CSS 動畫特效，官網就有線上展示，而且使用超簡單，在網頁引用 animate.css (npm 安裝或直接從 CDN 下載)，HTML 元素加上 class="animate__animate...
CSS Flexbox 佔滿剩餘高度時 Overflow 捲軸失效問題
| | | 0 | | 3,234 |
今天處理到一個網頁需求，排版需求為上方區塊大小固定，剩餘高度擺入超長清單，清單要可垂直捲動。這類情境，自然要優先考慮用佔滿剩餘網頁寬/高度的美妙解法 - CSS Flexbox搞定，做法如下： <!DOCTYPE html> <html> <head> ...
CSS 雜記：父元素未指定高度時 height 100% 無效
| | | 6 | | 6,824 |
學會 CSS Flexbox 時超開心，以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱，豈知還是會踩到小石頭。 有個需求是希望 IFrame/DIV 佔滿 TD 全部高度，IFrame/DIV 有設 height: 100%，但因父容器未指定高度時，不會發生效果。 用範例解說。table 透過 fle...
CSS 練習 - 翻牌動畫
| | | 1 | | 4,972 |
想學會在網頁做出翻牌效果，自己訂了題目練功 - 用 CSS transform-style: preserve-3d; 實現翻牌的視覺效果，並以循環播放、滑鼠滑過、滑鼠點擊三種方式觸發。 找到 W3School 有篇教學 - How TO - Flip Card，是很好的學習範本。 不細說從頭了，簡...
CSS 小技 - 圖片水平垂直置中並依容器大小自動縮放
| | | 3 | | 16,164 |
用 LINE 貼圖時我有個困擾，記憶中有張超貼切的圖，但我永遠記不住它來自哪一組，作者給的關鍵字又匹配不上，只好一組一組打開來找，但最絕的是，往往全部找完一輪也沒看到，遇上傳說中的「貼圖鬼遮眼」，最後隨便找張貼圖了事。 為了解決這個困擾，我開了 Side Project，用 ASP.NET Core...
自學網頁的權威資源 - MDN Web Docs
| | | 0 | | 11,767 |
我猜蠻多人跟我一樣，從沒上過 HTML/JavaScript 的課，甚至連書都很少買，寫網頁全靠著邊做邊學，上網複製貼上程式查資料慢慢養成。坦白說這不是最有效率的學習方式，但似乎是大部分有程式經驗的人跨界網頁開發常用的做法，也不能說是不長進不積極，就只是走平凡人走的路罷了。 我自己目前常遇的狀況，是...