SVG 貼進 CSS 或 <img> 老是出錯？來試試這個SVG編碼轉換器 (Base64 / URL 皆支援)
你可以選擇 URL 編碼、Base64 編碼或最小轉義，只需一鍵，就會自動產出壓縮後的程式碼、預覽圖片，還有三種常見應用的 CSS 實例。
這個工具設計簡潔，支援複製功能與響應式顯示，無需安裝即可使用，適合前端開發者、設計師、內容創作者處理 icon、logo、背景圖等情境，是日常開發的小幫手。 ...full story ››
你可以選擇 URL 編碼、Base64 編碼或最小轉義，只需一鍵，就會自動產出壓縮後的程式碼、預覽圖片，還有三種常見應用的 CSS 實例。
這個工具設計簡潔，支援複製功能與響應式顯示，無需安裝即可使用，適合前端開發者、設計師、內容創作者處理 icon、logo、背景圖等情境，是日常開發的小幫手。 ...full story ››
CSS 線上壓縮瘦身與解壓縮工具 - 一鍵 Minify & Beautify CSS
每次寫完 CSS，是不是也覺得CSS太過龐大、難以維護，還常被 Google PageSpeed 嫌棄？那這個線上工具就能幫上忙了！完成壓縮以後，若需要更新維護樣式表，也能隨時再解壓縮、自動格式化，讓CSS語法清晰可讀、方便修改。
不依賴框架、不添加額外程式，就是一把實用的 CSS 助手，適合每一位CSS設計師使用喔！ ...full story ››
[CSS:counter(line)]如何用 CSS 來顯示區塊裡的序列行數
有時候在瀏覽一些 Coding 的教學網站時，會發現很多的頁面，在顯示程式碼/原始碼的區塊裡，每一行的前面都有會顯示序列的行數，感覺很酷，
於是常常有朋友會詢問說，這個行數的數字是怎麼寫上去的呢？
是用外掛的 Javascript 來做的嗎？
還是這是什麼特殊的網頁效果？
其實在區塊裡加上逐行的行數，方法比大家想像中的要來的簡單的多，
只要用 CSS 語法就可以完成這個效果了 ...full story ››
於是常常有朋友會詢問說，這個行數的數字是怎麼寫上去的呢？
是用外掛的 Javascript 來做的嗎？
還是這是什麼特殊的網頁效果？
其實在區塊裡加上逐行的行數，方法比大家想像中的要來的簡單的多，
只要用 CSS 語法就可以完成這個效果了 ...full story ››
[RWD]iPhone X 以及 8, 8+ 等各代機種的螢幕尺寸解析度與CSS語法對照表
為了替客戶或是自己的網站設計一個RWD的行動版樣式，感覺有了每一款機種的尺寸，就好像在設計上就完成了一半那樣(其實還差的遠了喔)！
所以乾脆就直接整理了最近的這幾代 iPhone 每一款的螢幕尺寸解析對照表，讓有需要的朋友們參考。
畢竟在執行 RWD 的行動版設計或是打造一個 iPhone 上的 App，有了尺寸對照表示挺方便的，不是嗎 ^^
我們一起來看看吧 ...full story ››
所以乾脆就直接整理了最近的這幾代 iPhone 每一款的螢幕尺寸解析對照表，讓有需要的朋友們參考。
畢竟在執行 RWD 的行動版設計或是打造一個 iPhone 上的 App，有了尺寸對照表示挺方便的，不是嗎 ^^
我們一起來看看吧 ...full story ››
[CSS3]如何用 CSS 來改變 Placeholder 這個屬性的文字顏色
前一篇文章中，
我們提到了在 HTML5 的規範裡，提供了一個新屬性 Placeholder。
這個屬性很方便，不過也有一些陷阱和限制，其中比較明顯的一項，就是一般瀏覽器在顯示這個 Placeholder 文字時，預設的顏色對比普遍都太低了，不是很容易閱讀。
所以接著我們就來跟大家分享一下，如何用 CSS 來改變 Placeholder 的文字顏色 ...full story ››
我們提到了在 HTML5 的規範裡，提供了一個新屬性 Placeholder。
這個屬性很方便，不過也有一些陷阱和限制，其中比較明顯的一項，就是一般瀏覽器在顯示這個 Placeholder 文字時，預設的顏色對比普遍都太低了，不是很容易閱讀。
所以接著我們就來跟大家分享一下，如何用 CSS 來改變 Placeholder 的文字顏色 ...full story ››
[CSS3]如何重新定義 HTML 中換行標籤 BR 的樣式或是直接把BR的行距高度移除
如果開啟任何一篇網頁的原始碼，一定也會發現，原始碼中出現最多的標籤，絕對也是 <br />。
一般來說，連續的換行標籤，在瀏覽器上是看不出差異，就跟打一個 BR 是一樣的，可是其他的情況，就會產生額外的行距、高度或空白區間，在樣式上就很難處理。
有什麼方法可以去掉這樣的額外高度嗎？就是如何讓 BR 變成一個沒有實際作用的標籤呢？ ...full story ››
一般來說，連續的換行標籤，在瀏覽器上是看不出差異，就跟打一個 BR 是一樣的，可是其他的情況，就會產生額外的行距、高度或空白區間，在樣式上就很難處理。
有什麼方法可以去掉這樣的額外高度嗎？就是如何讓 BR 變成一個沒有實際作用的標籤呢？ ...full story ››
[CSS]網頁用的尺寸單位:PX 跟 EM 怎麼區分呀？等等，還有一個 REM...
CSS的語法中，常用的尺寸單位計有：PX(就是我們最熟悉的像素了)、PT、EM、REM、%(百分比)、CM(公分)、IN(英吋)...
早期CSS還沒有很成熟的時候，字型單位比較常用的是 PT(Point)，就像在 Word 裡面設定字體的級數，9級字、12級字這樣，9級字就是 9pt, 12級字就是 12 pt;
不過 PT 這個單位近幾年就很少用到，幾乎是消失在江湖上了。
另外像是公分、英吋等這類型的單位，主要是用來列印到紙張，所以也逐漸退出江湖(愛地球於是大家都少列印了)。
所以這次的主題，就放在另外幾個 PX, EM, REM 上 ...full story ››
早期CSS還沒有很成熟的時候，字型單位比較常用的是 PT(Point)，就像在 Word 裡面設定字體的級數，9級字、12級字這樣，9級字就是 9pt, 12級字就是 12 pt;
不過 PT 這個單位近幾年就很少用到，幾乎是消失在江湖上了。
另外像是公分、英吋等這類型的單位，主要是用來列印到紙張，所以也逐漸退出江湖(愛地球於是大家都少列印了)。
所以這次的主題，就放在另外幾個 PX, EM, REM 上 ...full story ››
[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式
如果要運用CSS來設置文字斷行的規則，對應的語法就是： word-break。
這個語法很好記憶，語法直接就是語意：文字斷行，
Word-Break 在用法上，有三個屬性，分別是：Normal、Keep-All、Break-All。
下面我們分別來聊一下這三種屬性各有哪些不同 ...full story ››
這個語法很好記憶，語法直接就是語意：文字斷行，
Word-Break 在用法上，有三個屬性，分別是：Normal、Keep-All、Break-All。
下面我們分別來聊一下這三種屬性各有哪些不同 ...full story ››
[CSS]如何讓別人無法列印你的網頁，簡單一行CSS搞定
有些時候，我們會希望某些網頁甚至整個網站，
都不要讓別人可以列印出來，
那要如何讓別人無法列印你的網頁呢？
這個方法相當簡單，就用短短一行 CSS 就可以做到，
例如說，
如果我們是希望某個單一頁面無法被列印，
那麼就直接在那個頁面中任何地方(當然最好是檔頭 <head></head>標籤內)，
加入下面的CSS碼 ...full story ››
都不要讓別人可以列印出來，
那要如何讓別人無法列印你的網頁呢？
這個方法相當簡單，就用短短一行 CSS 就可以做到，
例如說，
如果我們是希望某個單一頁面無法被列印，
那麼就直接在那個頁面中任何地方(當然最好是檔頭 <head></head>標籤內)，
加入下面的CSS碼 ...full story ››
[CSS]Font Awesome 真的算是網頁設計師的救世主
網頁設計，免不了的就是要有一些小圖示，
特別是像設群分享網站的圖示(臉書、Google+、twitter、IG...)，又好比下載啦、留言或是一些箭頭、指標等。
做這些小圖示雖然不麻煩(經常作的朋友們一般都有範本了)，
不過面對現在不同的裝置螢幕尺寸，
要不就是有時客戶有意見(或是自己看不順眼)，想換換顏色跟大小，三不五時就要改圖，
更討厭的是經常都要一個小圖做好幾個尺寸，再下CSS Code來配置，也是夠麻煩的。
今天跟大家分享一個猶如救世主角色的工具，有了祂，那麼小圖示的問題不僅不麻煩，還可以在設計上更多選擇與彈性，
這個工具就是：Font Awesome ...full story ››
特別是像設群分享網站的圖示(臉書、Google+、twitter、IG...)，又好比下載啦、留言或是一些箭頭、指標等。
做這些小圖示雖然不麻煩(經常作的朋友們一般都有範本了)，
不過面對現在不同的裝置螢幕尺寸，
要不就是有時客戶有意見(或是自己看不順眼)，想換換顏色跟大小，三不五時就要改圖，
更討厭的是經常都要一個小圖做好幾個尺寸，再下CSS Code來配置，也是夠麻煩的。
今天跟大家分享一個猶如救世主角色的工具，有了祂，那麼小圖示的問題不僅不麻煩，還可以在設計上更多選擇與彈性，
這個工具就是：Font Awesome ...full story ››