不用買字型,用 CSS 做出專業的縷空文字+外框
![不用買字型,用 CSS 做出專業的縷空文字+外框](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuczgebLNpeD_Qdmg5MHA2MVhofcPD4J6Ud_hkalQySFiNAnsdHi2gBuf5HqsHU6dnOUgoi6DqrBFPNKFsthAbW-nwrqQgM-ooNVAEUHAn7nZWvwnsS3UyipC_uuY8xHsec3HTm3y1RgLPdffbNlTECkW4Ejbwuwscxlg_ppDQJmjIVjFYZ80PXNuKQ/s1600/css-text-stroke.jpg=s0-rw)
最近接到一個需求,製作醫學疾病風險自我檢測頁面,客戶提供的設計圖質感不錯,只不過有設計感的畫面在製作 RWD 效果時,難度會提高很多。 其中一個部分需要使用高超的 CSS 技巧「縷空文字+外框」,這樣的效果無法用簡單的 CSS 語法做出來,原設計圖版面如下(紅框標示的部分...
繼續閱讀全文製作 TAB 頁籤選單最簡單的架構﹍純 CSS 實現技巧整理
![製作 TAB 頁籤選單最簡單的架構﹍純 CSS 實現技巧整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaadu6mDuk_HhY3SN-MNpSkalT06Em6dD1eVpVJaV8l_vFfAwl3FSyM9pg3A9b-h_TDvQfBaZJl7tu3IeYiAlU0HqyGZiGl6x8xh8YyrqfZ-fMan66tTkU_VLK1KdGxz_934a7dAKalOqh/s1600/blogger-sidebar-tab-widget-bootstrap.jpg)
最近有個需求是製作 TAB 頁籤選單,這功能很常見,理應沒什麼難度。然而客戶希望將來能自行編修、調整選單內容,並製作大量相關頁面,這對於不是熟悉前端程式碼、架構的人來說,要無腦編修 TAB 頁籤的 HTML/CSS 內容實在不太可能(因為這案子的選單內容區塊架構很複雜),而且我也...
繼續閱讀全文如何製作無圓點單選、多選按鈕(Input radio+checkbox)﹍純 CSS 技巧免 JS
![如何製作無圓點單選、多選按鈕(Input radio+checkbox)﹍純 CSS 技巧免 JS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU0BFs1yltVOMzxYocPbVRnVVnwPL2oAq-eW05uzvvIZeaGg3UJhWXB82mZBgYOfyzROrCfADrtpb1B9og7s5kNIf_pbb8sDtMNcT055AGmu1FKyaXHOvtS0vWE7hStMltrDKmpgKk_5fa/s0/input-radio-checkbox-css.jpg)
HTML 表單提供了基本款 input 單選功能(圓點效果 type="radio"),以及多選功能(核取方塊 type="checkbox")。如果不求版面質感的話,瀏覽器預設效果已經算實用了。 但網頁設計如果不想跟別人家撞衫,那麼預...
繼續閱讀全文在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡
![在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0qUnXahVzOgtVmYU5Gczo6JxCTNWbnqjxhevGojyWS1_7bc3Faxc2RMAH9SMIEt1h2xHrtbTP3DoHLijJPBIKB9FQsiHAXmWe-p7w5PCvFEh7HZUE9trDokM5Bm6VTXJUdExK958ysQs/s1600/fb-messenger-online-chat-without-plugin.jpg)
前陣子在「 CC0 免費圖庫搜尋引擎 」右下角,放了一個「錯誤回報」的按鈕,讓訪客可以即時留言回報站方。 這類的浮動按鈕很醒目,效果會比導覽列或頁尾的「聯絡站長」這類連結好一些。如果是熟悉網站動線的訪客,一般會知道去哪找留言板,但可惜很多使用者不一定熟悉網路或網站的通用設計。...
繼續閱讀全文CSS 撰寫技巧及規範﹍維護心得整理
![CSS 撰寫技巧及規範﹍維護心得整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5hByLtB_MKOx3i58JMC4ELYC5yGX-fUUyqcORu5umviyZRthsUNJhwU7WXbrHbaDFE4r-IavXmCbdB_1XkVqP2nG7nq8vmmsxgldv8atD4yQdlE0OTDOf9ELHOHNN9H65BRCMLfsC-Ah/s1600/css-structure-maintenance-skill.jpg)
前端開發 CSS 寫久了之後,發現幾個麻煩的地方: 命名字串想破頭,要避免重複,又得能正確理解 日後維護修改時,要找到正確的區塊位置得花不少時間 壓縮過的 CSS 碼無法閱讀、不易維護,好閱讀的 CSS 碼太冗長 因此決定研究一套方便維護 CSS 碼的作法,本篇心得比...
繼續閱讀全文解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧
![解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hBUwVtDZ8TsClDEo8ea-wRzrwl10zH-wjeyszxXUkguq8xPZUi1Oi9dyvf-LVMD76H9PNW65JjSM8_kOeAp4o8nHSVGVb5jpVqXicoLfcqCE4jsIMdm8YQheS4-V-SXXIS5-TbL9hYW_/s1600/floating-nav-cover-anchor.jpg)
網站使用「 浮動導覽列 」可提供友善的閱讀體驗,讓導覽列隨時保持在網頁最上方,訪客失焦時能重新找到方向。 不過這個設計後來發現有個隱藏的缺點,當網站使用了錨點後,訪客點擊錨點時,螢幕捲到的位置看起來怪怪的。 本站為了解決此現象,過去曾調高錨點的位置(放置隱藏的錨點),或是...
繼續閱讀全文如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解
![如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU0_c3TFHd2nj4pS-GwX29EDwlZjO5HgT9x4OZLl8lFR_hX0PJYihUjugH0wxCyPHZGZfbfbvUA6fNdZE9gAoDtELTFnUO_OzaUgnma9FAlsOaMDNeyrtHE8DPG4IyADRmFn_76Wd7WK31/s1600/star-rating-percentage-css.jpg)
最近接到需求要在網頁呈現「五顆星評等」的效果,就像搜尋結果常會看到的星級評等: 或 Google 商家的評分星等: 從上面的示意圖可發現,以 5 分為滿分的情況下,4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法),也不是 5 星(四捨五入法),...
繼續閱讀全文偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧
![偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NcMNqhYFscCGOloTclf1TiuMoibXCeFlOYOqBqZE4FZEC2AZ_LIr2VQkDgtw2LArD6-lFjjN_4Ywg26OOFvrT8s-Mht7CD7eklVAhPh4mlDuPcdtkJawFZrZV08TGFURs7r9Fyp_-RCh/s1600/dom-watch-node-added-css-animation.jpg)
最近這個案例比較特殊,幫客戶改付費範本次數一多,某些比較貴的範本,作者為了不想讓別人看懂程式碼,雖然 JS 沒有使用混淆 (obfuscate),但是壓縮、重組得不成人形,導致完全無法去閱讀解析這些 JS 程式碼。很多動態生成的區塊,最終只能等 DOM 完整成形後,再來寫 JS ...
繼續閱讀全文製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧
![製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisklYlVp4Skt8BoyBpCVEjYaU0ahNLvZ-Hi1YkpSTwxcrRpOvWgw_YV5fa4DixA1Cf5SXvYiQbC4XzDYGHJfnSuscKRXJlPgJqKnezgPR4-hmETpBgIaSqmc9scDQI2fBKSaCJS9cA9Enf/s1600/bounce-button-call-to-action-css-animation.jpg)
最近接到一個需求,案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意,指定這個按鈕必須上下不斷彈跳。 這樣的設計的確不錯,因為製作網頁的最終目的,就是讓訪客下定決心並且行動,無論目標是讓訪客購買產品、按讚、或留言聯繫等等,這個行為總稱「行動呼籲」,也就是 Call To...
繼續閱讀全文滑動開關切換按鈕﹍CSS 語法產生器
![滑動開關切換按鈕﹍CSS 語法產生器](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFEhuh-VMtVMP3v3PREoQG4QtLm0oOaMNiXqlvdyFRN_cSIxbHbZs1kcNM5WsZlqUxNv27vJOBIFZlHAaZLbAdzwC5i_v3d5VOekPNxBIapDgInuQmaeD1jpAMfHQXGn_0mcs966F4RuO3/s1600/on-off-flipswitch-css.jpg)
最簡單的切換選項效果,是使用 Input 元素的 radio 型態,也就是單選(非複選)的效果,長得像這樣: 之前接到一個需求,希望切換效果做得有質感,像是蘋果系統的切換按鈕,例如下面的範例: 原以為這樣的效果,需要用 JS 才能做出來,沒想到純 CSS 就能有很...
繼續閱讀全文台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得
![台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqC5uQzi96DmGXe1pAULRomzY8z4DtblURrvePU4pEi7cd_-pz5L95PaLQJ57h9uUzYPAUaM6JoRQnGbztVqPdxtNdFEX4hGkyjODoY_mo7KwtC02tQ0YjmFe4Iv5N1grZeitb4IjZp032/s1600/taiwan-county-town-zip-address-twzipcode.jpg)
填寫會員資料的表單,大多需要輸入地址,不過自己製作「縣市」、「鄉鎮地區」的下拉選單其實很麻煩,而且最好也要提供郵遞區號,因為填表者自己不一定記得住。 本篇介紹的這個 jQuery 外掛 TWzipcode,可以完美地解決這些麻煩事,同時也會分享實作的心得。
繼續閱讀全文自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例
![自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ngH-XxYtsPiXufOQ4GYNpYqOqTGR9wwEBorAHL8pKwZI6kGFWOBK5XWrdjb-MHzzVriFrhq9WdWeRNKyfTRQ2y5UwTS5gEVxvpDbjhyXZjFpRuws068VrwSMX4n7-lInQNXcsqTO9udI/s1600/input-type-file-upload-css-skill.jpg)
之前製作「 本站開放留言上傳圖片功能 」時,才發現 Input 上傳檔案按鈕還真不是普通地難搞。查了一下發現 Google 這些字串 "input type file css not working" 時會有不少案例,很是離奇。 好在最後還是找到完美的解決...
繼續閱讀全文Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕
![Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrFsGdynii3vy86BdozWSToi2twyTUvzGRxD2okMnTG_1S9Vfq-Bxw6VIeCu9XYizvZL4bwn7DoO-iVyQJw-6ZGWGNcWnjLRqy3fjSQWNu6HG3DNl_A8oP9vAL2ort2whn6q7-HFr3lBs/s780/bootstrap-webpage-layout-practice.jpg)
Bootstrap 的使用說明內容不少,份量足以出一本書,不過工具書用從頭看到尾的方式來學習,效果不見得比較好。 如同「一圖勝過千言萬語」,從範例中來學習、吸收 Bootstrap,效率會來得更快,印象也比較深刻。 本篇提供一個簡單的小範例,可以熟悉以下這些功能的用法: ...
繼續閱讀全文前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text
![前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNzRpu7cUdtaXQGfeQ-KYNW_mmP2mMzfmKjQX1ULmN1aHEY1vtMYMKmMivXUz6vRPFEPUSVW4slMO-Ww-bz09v_zK4m8vEVycHjrVnyjT7Tb76mtjXk_cGxYc7yVIR1098pEb0xlv4rso/s1600/emmet-sublime-text.jpg)
網頁製作久了就會發現,手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題,「 Bootstrap 」可以縮短網頁版面設計的時間,那麼 HTML/CSS 的輸入,有沒有快速便利的工具呢? 「 Emmet 」(...
繼續閱讀全文製作網頁表單時,如何讓複雜的配置也能完美對齊﹍Grid 網格系統
![製作網頁表單時,如何讓複雜的配置也能完美對齊﹍Grid 網格系統](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtH15_89eYWH9UkoEzYAcD0RYcWDBDRtoC0iV8pMjEwa3ZBUnJ64Bycrz_ICgdXINYamC9bD3o8PzWaJv2XE6kmFaDFGL2Zt2zcwMi4Wp3qLKa62Jnj6latl0WK4Hk2rKJ73PSDO_mvuq8/s640/complex-form-custom-grid-system.jpg)
如果熟悉「 Bootstrap 」這套 CSS 框架,那麼製作網頁表單不是什麼難事,查閱一下適合表單使用的 class 名稱,就能快速做出美觀、有一定水準的表單。 最近處理一個大型專案,需要製作許多複雜的表單,結果碰上了難題。什麼程度稱為 "複雜" 呢?可...
繼續閱讀全文Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理
![Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SuwraGa_1uS7_Q5CT84emYgwRmMwCHncpjnOfoPNvRL9-pKQZP_SD_llLZCX7P2VIKic1H3TEQw3g4yAlmF-tsJfRd1HlrcZu69TtSBAmJACl5qFtV7HwMiAVjUPact3I2FeSVPkY2Df/s780/bootstrap-cheat-sheet.jpg)
jQuery 這套框架(framework)的誕生,是為了讓工程師寫更少的 Javascript、做更多事。同樣的,Bootstrap 的誕生,可以讓前端工程師處理版面 CSS 時節省許多時間,能專注在更重要的主題上。 Bootstrap 把網頁設計常用的元件,例如按鈕、表單...
繼續閱讀全文讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin
![讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhn0Ou8TrHhecrUQa4_EH5uboviZ13b-joCs83cZdmXOU8NOrMpVwit9uUQUhW2Pg48y_nFxUgF8OfRcR0ZWmqF0HAmgpc0f-zrOH6a_uBQHl5s2yNNadMTS50C1o_zxtFlr91a4OA0J4v/s640/rwd-font-size-solution-vmin.jpg)
最近需要架設 RWD 一頁式網站,結果在「自適應文字大小」這件事卡關,為何會如此呢? 處理部落格型態的網站時,大部分直接套用現成的 RWD「 付費範本 」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內,調整字體大小的問題不大。 而一頁式網站,可以算是開放式空間...
繼續閱讀全文使用 CSS 語法就能讓 Blogger 自動產生留言編號
![使用 CSS 語法就能讓 Blogger 自動產生留言編號](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPPGsLvt_K_tZiip-e0PbqlrW9ZmN5ojlU-AxA65cmdgJ7zsDInmuejVjf4DBTKj-r8eYZ-LfCRxeR5IPzkE_ZjR8nboBxvcI7F-SMw4octxyyFzFIyb3Fzi8R-dmwE57vjxwe3bdUL3Z/s640/blogger-comment-counter-css.jpg)
趁著網站改版,決定好好檢視所有程式碼,能優化的地方就處理,例如去除不必要的 javascript、或找替代方案,因為「 優化網站效能該注意哪些事? 」有提過,影響網頁載入速度最重要的第二大因素,就是 JS。 之前曾寫過「 Blogger 串聯式留言__留言編號 」,是利用 J...
繼續閱讀全文[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例
![[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMObqBozDq1rAdU1p6HM5w6z0EF3YZpOsuCFb3nJ8RQyaUVPcGKb-TQ94vZVznLXwsf_2veaAGtaaUhF_8yrimL6_5ba910xO6wblQhjD7JWDbQRP5QErgUmZiCZrWIgL-FvxHUrehlLcY/s1600/color-blink-web-design-2.jpg)
上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」,提出本站的設計方針為: 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅、...
繼續閱讀全文讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧
![讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyClZbar8GW4bF9O2w8a0c7NpnW7qBd1RnwTPdemt10Xj-69K51nV9_zIVmbWfxHEHUYMfInd37-OiymP4vJExxqWafGBIdPZRyhLsb8CTj99U6QHUzuSrGiwm4xdMk7dG632DJJGwQx3G/s640/livia-multiliine-ellipsis.jpg)
之前寫過「 讓標題過長的文字自動省略﹍單行 CSS 技巧 」,用來處理單行標題過長的問題。不過最近處理多個網站時,剛好都是旅遊美食類型,文章標題比起一般部落格會長上許多。 在特殊版型下(例如區塊寬度不夠),文章標題使用單行省略文字的方式,不容易辨識主題意涵,會導致點擊率下降。...
繼續閱讀全文