[CSS:counter(line)]如何用 CSS 來顯示區塊裡的序列行數

有時候在瀏覽一些 Coding 的教學網站時，會發現很多的頁面，在顯示程式碼/原始碼的區塊裡，每一行的前面都有會顯示序列的行數，感覺很酷，  
於是常常有朋友會詢問說，這個行數的數字是怎麼寫上去的呢？  
是用外掛的 Javascript 來做的嗎？  
還是這是什麼特殊的網頁效果？  
其實在區塊裡加上逐行的行數，方法比大家想像中的要來的簡單的多，  
只要用 CSS 語法就可以完成這個效果了 ...full story ››

[RWD]iPhone X 以及 8, 8+ 等各代機種的螢幕尺寸解析度與CSS語法對照表

為了替客戶或是自己的網站設計一個RWD的行動版樣式，感覺有了每一款機種的尺寸，就好像在設計上就完成了一半那樣(其實還差的遠了喔)！  
所以乾脆就直接整理了最近的這幾代 iPhone 每一款的螢幕尺寸解析對照表，讓有需要的朋友們參考。  
畢竟在執行 RWD 的行動版設計或是打造一個 iPhone 上的 App，有了尺寸對照表示挺方便的，不是嗎 ^^  
我們一起來看看吧 ...full story ››

[CSS3]如何用 CSS 來改變 Placeholder 這個屬性的文字顏色

前一篇文章中，  
我們提到了在 HTML5 的規範裡，提供了一個新屬性 Placeholder。  
這個屬性很方便，不過也有一些陷阱和限制，其中比較明顯的一項，就是一般瀏覽器在顯示這個 Placeholder 文字時，預設的顏色對比普遍都太低了，不是很容易閱讀。  
所以接著我們就來跟大家分享一下，如何用 CSS 來改變 Placeholder 的文字顏色 ...full story ››

[CSS3]如何重新定義 HTML 中換行標籤 BR 的樣式或是直接把BR的行距高度移除

如果開啟任何一篇網頁的原始碼，一定也會發現，原始碼中出現最多的標籤，絕對也是 <br />。  
一般來說，連續的換行標籤，在瀏覽器上是看不出差異，就跟打一個 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 ››

[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式

如果要運用CSS來設置文字斷行的規則，對應的語法就是： word-break。  
這個語法很好記憶，語法直接就是語意：文字斷行，  
Word-Break 在用法上，有三個屬性，分別是：Normal、Keep-All、Break-All。  
下面我們分別來聊一下這三種屬性各有哪些不同 ...full story ››

[CSS]如何讓別人無法列印你的網頁，簡單一行CSS搞定

有些時候，我們會希望某些網頁甚至整個網站，  
都不要讓別人可以列印出來，  
那要如何讓別人無法列印你的網頁呢？  
 
這個方法相當簡單，就用短短一行 CSS 就可以做到，  
例如說，  
如果我們是希望某個單一頁面無法被列印，  
那麼就直接在那個頁面中任何地方(當然最好是檔頭 <head></head>標籤內)，  
加入下面的CSS碼 ...full story ››

[CSS]Font Awesome 真的算是網頁設計師的救世主

網頁設計，免不了的就是要有一些小圖示，  
特別是像設群分享網站的圖示(臉書、Google+、twitter、IG...)，又好比下載啦、留言或是一些箭頭、指標等。  
做這些小圖示雖然不麻煩(經常作的朋友們一般都有範本了)，  
不過面對現在不同的裝置螢幕尺寸，  
要不就是有時客戶有意見(或是自己看不順眼)，想換換顏色跟大小，三不五時就要改圖，  
更討厭的是經常都要一個小圖做好幾個尺寸，再下CSS Code來配置，也是夠麻煩的。  
 
今天跟大家分享一個猶如救世主角色的工具，有了祂，那麼小圖示的問題不僅不麻煩，還可以在設計上更多選擇與彈性，  
這個工具就是：Font Awesome ...full story ››

[CSS]驗證一下，看網站是否已經行動最佳化了嗎？

從好幾年前開始，  
就不斷的有各個網路專家宣稱行動時代開始了，  
印象中已經有好幾個年，都被稱為所謂的行動元年，  
喊久了，似乎也就漸漸無感。  
 
專家們喊的趨勢是一回事，不管時間上準不準，方向是絕對錯不了的，  
而從流量分析上看起來，  
這兩年中，  
由行動裝置瀏覽的比例的確是很明顯的大幅增加，甚至已經完全超過50%以上了(依據我們自家的流量)，  
除此外，  
Google 也多次聲明，會將一個網站行動化的好壞，也放入檢索排名的參考因素之一 ...full story ››

[CSS]響應式網站設計(RWD)如何擺平 Youtube 的影片

RWD(Responsive Web Design)的設計，其中一個問題就是 Youtube, Vimeo 等影片嵌入時，不會隨著網頁寬度自動縮放。  
雖然 RWD 這個我們稱為響應式網站設計的東西，是很方便好用，  
不用再大費周章針對不同的平台設計不同的系統，  
只要透過一個 CSS 的文檔，就可以一打十個 ^^  
 
但是只要頁面上有嵌入影片，那麼就會讓好辛苦設計的網頁，在手機上看時，  
出現討厭的橫向捲軸(造成可以左右移動)。  
 
解決方法其實不難，我們可以試著這樣做  
 
...full story ››