Category: CSS

寫網頁介面時,有時我會想用多種顏色表示不同類別資料,此時如何挑選一組彼此差異明顯的顏色,差異大到即使同框出現也不致混淆,這批顏色該如何搭配組合是個學問。 面對這個常見的小需求,我 Google 到不錯的建議 - List of 20 Simple, Distinct Colors,為了繪製捷運路線圖...

想在網頁加上動畫效果,資料表格中在某列資料變化時改變背景色吸引注意,再使用淡化效果恢復原本背景色。 以此目標我設計了一個綜合練習題,在網頁上放五個 DIV,點擊後使用 CSS 動畫效果將背景色改為紫色再逐漸淡化,1.5 秒後恢復原來顏色。若連續點擊同一 DIV,需停止現有動畫,重頭播放。另外,設計一...

最近遇到的前端小需求,分類項目清單允許使用者勾選整個類別,也可以展開類別勾選個別項目,操作起來類似以下這個樣子: 這種互動操作不難實作,弄個 { Catg: 'FrontEnd', Name: 'Vue.js', Checked: false } 物件模型,拿出 Vue.js 簡單搭一下,插電、開...

身為老派全端攻城獅,我對網頁動畫效果的知識前幾年還停在 jQuery fadeIn()、slideDown() 時代,腦中的想像是用 JavaScript 間隔固定時間修改 CSS 樣式數值。這些年見了一點世面,發現前端世界早就變了,現在大家都用 CSS 做網頁動畫。很早之前各家瀏覽器便嘗試內建動畫...

之前讀 Vue.js 3學到好東西,有個開源專案 Animate.css,彙集了五花八門的各式 CSS 動畫特效,官網就有線上展示,而且使用超簡單,在網頁引用 animate.css (npm 安裝或直接從 CDN 下載),HTML 元素加上 class="animate__animate...

今天處理到一個網頁需求,排版需求為上方區塊大小固定,剩餘高度擺入超長清單,清單要可垂直捲動。這類情境,自然要優先考慮用佔滿剩餘網頁寬/高度的美妙解法 - CSS Flexbox搞定,做法如下: <!DOCTYPE html> <html> <head> ...

學會 CSS Flexbox 時超開心,以為人生從此不必再為佔滿剩餘網頁寬/高度煩惱,豈知還是會踩到小石頭。 有個需求是希望 IFrame/DIV 佔滿 TD 全部高度,IFrame/DIV 有設 height: 100%,但因父容器未指定高度時,不會發生效果。 用範例解說。table 透過 fle...

想學會在網頁做出翻牌效果,自己訂了題目練功 - 用 CSS transform-style: preserve-3d; 實現翻牌的視覺效果,並以循環播放、滑鼠滑過、滑鼠點擊三種方式觸發。 找到 W3School 有篇教學 - How TO - Flip Card,是很好的學習範本。 不細說從頭了,簡...

用 LINE 貼圖時我有個困擾,記憶中有張超貼切的圖,但我永遠記不住它來自哪一組,作者給的關鍵字又匹配不上,只好一組一組打開來找,但最絕的是,往往全部找完一輪也沒看到,遇上傳說中的「貼圖鬼遮眼」,最後隨便找張貼圖了事。 為了解決這個困擾,我開了 Side Project,用 ASP.NET Core...

我猜蠻多人跟我一樣,從沒上過 HTML/JavaScript 的課,甚至連書都很少買,寫網頁全靠著邊做邊學,上網複製貼上程式查資料慢慢養成。坦白說這不是最有效率的學習方式,但似乎是大部分有程式經驗的人跨界網頁開發常用的做法,也不能說是不長進不積極,就只是走平凡人走的路罷了。 我自己目前常遇的狀況,是...

這篇筆記技術成分不高,主要是自己備忘用的。如果你已知道(或是完全不想知道)怎麼在網頁用 <ol> <li> 配 CSS 做出如下圖的 1) 2)、3.1、3.2,請略過本文。 寫了十幾年網頁,前陣子才遇到這個需求。條文資料分兩層 <ol> <li>,...

本篇為 CSS 小雜魚發自內心的驚喜,高手請自行迴避,切忌嘲諷唾棄。 圖片來源 Lag 好幾年才學會,我心中的網頁排版千古難題,原來早有輕鬆解法。「左側選單寬度固定,其餘空間顯示內容」、「選單或工具列置頂,最下方有狀態列,中間所有空間用來顯示內容」是常見的網頁配置需求,可惜我一直不得其法,這些年用...

前篇文末提到用 CSS 美化瀏覽器預設 Checkbox 顯示的小技巧在實務應用上可能會遇過小問題,謎底揭曉 - 列印時會失真。 如上圖所示,瀏覽器列印時預設會忽略 HTML 元素的背景色或背景圖以求簡潔易讀,讓 input[type=checkbox]+span { background: Ur...

網頁介面的複選選項,大家第一個想到的都是 <input type="checkbox">,配合 <label> 能做到點選文字或勾選方塊都能選取的效果 (用 <label> 包住 <input type="checkbox&qu...

部落格被 Google Search Console 糾正部分排版不適合行動裝置閱讀。 檢視問題頁面研判是文章出現過長英文字串超出邊框,造成文章區塊變窄造成。導致問題的文字通常是 Namespace 加型別名稱,URL、檔案路徑等,共同特色是長度長且其中不包含空白或標點符號: 解決這類問題,腦海中...

活到老學到老,今天又學到新知 - 雖然顯示 HTML 格式已是當今 Email 軟體或線上信箱的必要條件,但許多被視為基本的 CSS 功能卻不一定在支援範圍內。 用以下範例展示,我設計一段 HTML 當作 Email 內文。先將 .dynamic 設成 display: none,再指定 .m...