2024-06-01 11:13 AM 0 1,273
前幾天用 CSS + 自訂網頁元素刻了香草 3D 骰子,好久沒寫前端寫出興趣來,最近有另一個需求是想做上傳進度條。類似的東西十年前做過,當時是用 Knockout.js MVVM。 盤點十年下來我用的前端框架從 Knockout.js 換 Angular.js 再轉到 Vue.js,經歷過兩次砍掉重...
2024-05-26 11:09 PM 4 2,858
故事是這樣的,在網路上查到一個很酷的 CSS 3D 旋轉方塊教學: 看到後禁不住手癢,馬上照著刻了一套洗巴辣擲骰子動畫: 嚴格來說,我的 HTML 5 CSS 跟 JavaScript 技能等級只到中上,過去要挑戰這種題目屬越級打怪,少不了爬文地獄加撞牆撞到飽。現在有了 Github Copli...
2024-01-03 10:28 PM 5 2,206
寫網頁介面時,有時我會想用多種顏色表示不同類別資料,此時如何挑選一組彼此差異明顯的顏色,差異大到即使同框出現也不致混淆,這批顏色該如何搭配組合是個學問。 面對這個常見的小需求,我 Google 到不錯的建議 - List of 20 Simple, Distinct Colors,為了繪製捷運路線圖...
2023-08-10 11:41 PM 2 1,202
想在網頁加上動畫效果,資料表格中在某列資料變化時改變背景色吸引注意,再使用淡化效果恢復原本背景色。 以此目標我設計了一個綜合練習題,在網頁上放五個 DIV,點擊後使用 CSS 動畫效果將背景色改為紫色再逐漸淡化,1.5 秒後恢復原來顏色。若連續點擊同一 DIV,需停止現有動畫,重頭播放。另外,設計一...
2023-08-04 10:46 PM 0 2,473
最近遇到的前端小需求,分類項目清單允許使用者勾選整個類別,也可以展開類別勾選個別項目,操作起來類似以下這個樣子: 這種互動操作不難實作,弄個 { Catg: 'FrontEnd', Name: 'Vue.js', Checked: false } 物件模型,拿出 Vue.js 簡單搭一下,插電、開...
2023-07-11 11:23 PM 2 5,353
身為老派全端攻城獅,我對網頁動畫效果的知識前幾年還停在 jQuery fadeIn()、slideDown() 時代,腦中的想像是用 JavaScript 間隔固定時間修改 CSS 樣式數值。這些年見了一點世面,發現前端世界早就變了,現在大家都用 CSS 做網頁動畫。很早之前各家瀏覽器便嘗試內建動畫...
2023-07-09 12:42 PM 0 1,973
之前讀 Vue.js 3學到好東西,有個開源專案 Animate.css,彙集了五花八門的各式 CSS 動畫特效,官網就有線上展示,而且使用超簡單,在網頁引用 animate.css (npm 安裝或直接從 CDN 下載),HTML 元素加上 class="animate__animate...
2023-06-26 10:35 PM 0 2,422
今天處理到一個網頁需求,排版需求為上方區塊大小固定,剩餘高度擺入超長清單,清單要可垂直捲動。這類情境,自然要優先考慮用佔滿剩餘網頁寬/高度的美妙解法 - CSS Flexbox搞定,做法如下: <!DOCTYPE html> <html> <head> ...
2022-11-14 08:40 PM 6 5,547
學會 CSS Flexbox 時超開心,以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱,豈知還是會踩到小石頭。 有個需求是希望 IFrame/DIV 佔滿 TD 全部高度,IFrame/DIV 有設 height: 100%,但因父容器未指定高度時,不會發生效果。 用範例解說。table 透過 fle...
2022-05-19 07:30 AM 1 4,651
想學會在網頁做出翻牌效果,自己訂了題目練功 - 用 CSS transform-style: preserve-3d; 實現翻牌的視覺效果,並以循環播放、滑鼠滑過、滑鼠點擊三種方式觸發。 找到 W3School 有篇教學 - How TO - Flip Card,是很好的學習範本。 不細說從頭了,簡...
2022-04-18 12:00 AM 3 14,355
用 LINE 貼圖時我有個困擾,記憶中有張超貼切的圖,但我永遠記不住它來自哪一組,作者給的關鍵字又匹配不上,只好一組一組打開來找,但最絕的是,往往全部找完一輪也沒看到,遇上傳說中的「貼圖鬼遮眼」,最後隨便找張貼圖了事。 為了解決這個困擾,我開了 Side Project,用 ASP.NET Core...
2022-04-16 12:46 PM 0 11,182
我猜蠻多人跟我一樣,從沒上過 HTML/JavaScript 的課,甚至連書都很少買,寫網頁全靠著邊做邊學,上網複製貼上程式查資料慢慢養成。坦白說這不是最有效率的學習方式,但似乎是大部分有程式經驗的人跨界網頁開發常用的做法,也不能說是不長進不積極,就只是走平凡人走的路罷了。 我自己目前常遇的狀況,是...
2020-12-18 10:12 PM 2 3,433
這篇筆記技術成分不高,主要是自己備忘用的。如果你已知道(或是完全不想知道)怎麼在網頁用 <ol> <li> 配 CSS 做出如下圖的 1) 2)、3.1、3.2,請略過本文。 寫了十幾年網頁,前陣子才遇到這個需求。條文資料分兩層 <ol> <li>,...
2020-11-14 02:59 PM 1 20,893
本篇為 CSS 小雜魚發自內心的驚喜,高手請自行迴避,切忌嘲諷唾棄。 圖片來源 Lag 好幾年才學會,我心中的網頁排版千古難題,原來早有輕鬆解法。「左側選單寬度固定,其餘空間顯示內容」、「選單或工具列置頂,最下方有狀態列,中間所有空間用來顯示內容」是常見的網頁配置需求,可惜我一直不得其法,這些年用...
2020-02-20 09:15 PM 3 3,044
前篇文末提到用 CSS 美化瀏覽器預設 Checkbox 顯示的小技巧在實務應用上可能會遇過小問題,謎底揭曉 - 列印時會失真。 如上圖所示,瀏覽器列印時預設會忽略 HTML 元素的背景色或背景圖以求簡潔易讀,讓 input[type=checkbox]+span { background: Ur...
2020-02-17 06:17 AM 1 26,789
網頁介面的複選選項,大家第一個想到的都是 <input type="checkbox">,配合 <label> 能做到點選文字或勾選方塊都能選取的效果 (用 <label> 包住 <input type="checkbox&qu...