顯示具有 電腦- 網頁設計-CSS 標籤的文章。 顯示所有文章
顯示具有 電腦- 網頁設計-CSS 標籤的文章。 顯示所有文章

Google 試算表隱藏選單+工具列+公式列﹍讓工作表區塊最大化,瀏覽效果最舒適

這陣子為了「 克服電腦背光的傷害,使用大尺寸螢幕保護眼睛 」,從距離約 2 公尺處看螢幕,得將作業系統縮放比例設定為 200% 以上,字體也須放大、設粗體,眼睛看起來才舒服。 而開瀏覽器時經放大比例後,不可避免網頁的可視範圍會少很多,對於文章為主的網頁,可利用「 Reader ...

繼續閱讀全文

不用買字型,用 CSS 做出專業的縷空文字+外框

最近接到一個需求,製作醫學疾病風險自我檢測頁面,客戶提供的設計圖質感不錯,只不過有設計感的畫面在製作 RWD 效果時,難度會提高很多。 其中一個部分需要使用高超的 CSS 技巧「縷空文字+外框」,這樣的效果無法用簡單的 CSS 語法做出來,原設計圖版面如下(紅框標示的部分...

繼續閱讀全文

製作 TAB 頁籤選單最簡單的架構﹍純 CSS 實現技巧整理

最近有個需求是製作 TAB 頁籤選單,這功能很常見,理應沒什麼難度。然而客戶希望將來能自行編修、調整選單內容,並製作大量相關頁面,這對於不是熟悉前端程式碼、架構的人來說,要無腦編修 TAB 頁籤的 HTML/CSS 內容實在不太可能(因為這案子的選單內容區塊架構很複雜),而且我也...

繼續閱讀全文

如何製作無圓點單選、多選按鈕(Input radio+checkbox)﹍純 CSS 技巧免 JS

HTML 表單提供了基本款 input 單選功能(圓點效果 type="radio"),以及多選功能(核取方塊 type="checkbox")。如果不求版面質感的話,瀏覽器預設效果已經算實用了。 但網頁設計如果不想跟別人家撞衫,那麼預...

繼續閱讀全文

在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡

前陣子在「 CC0 免費圖庫搜尋引擎 」右下角,放了一個「錯誤回報」的按鈕,讓訪客可以即時留言回報站方。 這類的浮動按鈕很醒目,效果會比導覽列或頁尾的「聯絡站長」這類連結好一些。如果是熟悉網站動線的訪客,一般會知道去哪找留言板,但可惜很多使用者不一定熟悉網路或網站的通用設計。...

繼續閱讀全文

CSS 撰寫技巧及規範﹍維護心得整理

前端開發 CSS 寫久了之後,發現幾個麻煩的地方: 命名字串想破頭,要避免重複,又得能正確理解 日後維護修改時,要找到正確的區塊位置得花不少時間 壓縮過的 CSS 碼無法閱讀、不易維護,好閱讀的 CSS 碼太冗長 因此決定研究一套方便維護 CSS 碼的作法,本篇心得比...

繼續閱讀全文

解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧

網站使用「 浮動導覽列 」可提供友善的閱讀體驗,讓導覽列隨時保持在網頁最上方,訪客失焦時能重新找到方向。 不過這個設計後來發現有個隱藏的缺點,當網站使用了錨點後,訪客點擊錨點時,螢幕捲到的位置看起來怪怪的。 本站為了解決此現象,過去曾調高錨點的位置(放置隱藏的錨點),或是...

繼續閱讀全文

如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

最近接到需求要在網頁呈現「五顆星評等」的效果,就像搜尋結果常會看到的星級評等: 或 Google 商家的評分星等: 從上面的示意圖可發現,以 5 分為滿分的情況下,4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法),也不是 5 星(四捨五入法),...

繼續閱讀全文

偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧

最近這個案例比較特殊,幫客戶改付費範本次數一多,某些比較貴的範本,作者為了不想讓別人看懂程式碼,雖然 JS 沒有使用混淆 (obfuscate),但是壓縮、重組得不成人形,導致完全無法去閱讀解析這些 JS 程式碼。很多動態生成的區塊,最終只能等 DOM 完整成形後,再來寫 JS ...

繼續閱讀全文

製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

最近接到一個需求,案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意,指定這個按鈕必須上下不斷彈跳。 這樣的設計的確不錯,因為製作網頁的最終目的,就是讓訪客下定決心並且行動,無論目標是讓訪客購買產品、按讚、或留言聯繫等等,這個行為總稱「行動呼籲」,也就是 Call To...

繼續閱讀全文

滑動開關切換按鈕﹍CSS 語法產生器

最簡單的切換選項效果,是使用 Input 元素的 radio 型態,也就是單選(非複選)的效果,長得像這樣: 之前接到一個需求,希望切換效果做得有質感,像是蘋果系統的切換按鈕,例如下面的範例: 原以為這樣的效果,需要用 JS 才能做出來,沒想到純 CSS 就能有很...

繼續閱讀全文

台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得

填寫會員資料的表單,大多需要輸入地址,不過自己製作「縣市」、「鄉鎮地區」的下拉選單其實很麻煩,而且最好也要提供郵遞區號,因為填表者自己不一定記得住。 本篇介紹的這個 jQuery 外掛 TWzipcode,可以完美地解決這些麻煩事,同時也會分享實作的心得。

繼續閱讀全文

自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例

之前製作「 本站開放留言上傳圖片功能 」時,才發現 Input 上傳檔案按鈕還真不是普通地難搞。查了一下發現 Google 這些字串 "input type file css not working" 時會有不少案例,很是離奇。 好在最後還是找到完美的解決...

繼續閱讀全文

Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕

Bootstrap 的使用說明內容不少,份量足以出一本書,不過工具書用從頭看到尾的方式來學習,效果不見得比較好。 如同「一圖勝過千言萬語」,從範例中來學習、吸收 Bootstrap,效率會來得更快,印象也比較深刻。 本篇提供一個簡單的小範例,可以熟悉以下這些功能的用法: ...

繼續閱讀全文

前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text

網頁製作久了就會發現,手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題,「 Bootstrap 」可以縮短網頁版面設計的時間,那麼 HTML/CSS 的輸入,有沒有快速便利的工具呢? 「 Emmet 」(...

繼續閱讀全文

製作網頁表單時,如何讓複雜的配置也能完美對齊﹍Grid 網格系統

如果熟悉「 Bootstrap 」這套 CSS 框架,那麼製作網頁表單不是什麼難事,查閱一下適合表單使用的 class 名稱,就能快速做出美觀、有一定水準的表單。 最近處理一個大型專案,需要製作許多複雜的表單,結果碰上了難題。什麼程度稱為 "複雜" 呢?可...

繼續閱讀全文

Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理

jQuery 這套框架(framework)的誕生,是為了讓工程師寫更少的 Javascript、做更多事。同樣的,Bootstrap 的誕生,可以讓前端工程師處理版面 CSS 時節省許多時間,能專注在更重要的主題上。 Bootstrap 把網頁設計常用的元件,例如按鈕、表單...

繼續閱讀全文

讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin

最近需要架設 RWD 一頁式網站,結果在「自適應文字大小」這件事卡關,為何會如此呢? 處理部落格型態的網站時,大部分直接套用現成的 RWD「 付費範本 」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內,調整字體大小的問題不大。 而一頁式網站,可以算是開放式空間...

繼續閱讀全文

使用 CSS 語法就能讓 Blogger 自動產生留言編號

趁著網站改版,決定好好檢視所有程式碼,能優化的地方就處理,例如去除不必要的 javascript、或找替代方案,因為「 優化網站效能該注意哪些事? 」有提過,影響網頁載入速度最重要的第二大因素,就是 JS。 之前曾寫過「 Blogger 串聯式留言__留言編號 」,是利用 J...

繼續閱讀全文

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」,提出本站的設計方針為: 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅、...

繼續閱讀全文
TOP