[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 ››

[CSS3]用純CSS語法畫一個正圓形

現在很多的網站,都很流行採用純CSS語法來設計樣式,  
特別是以往要用圖片來製作的,現在透過CSS3的標準語法,  
也可以取代一部分圖片使用。  
像是最常見的圓形或是箭頭等等...  
 
有朋友問如何用純CSS的語法,來畫一個正圓形呢?  
 
方法很簡單:  
先決定你的圓形要多大(寬與高),  
在這裡我先以80px為直徑,做一個黑色的正圓形 ...full story ››

[CSS文字垂直置中]行高(Line-Height)的妙用

當我們在使用CSS語法中的這個Line-Height(行高/行距)這個指令時,  
大多是用來設定一個文字段落中,行與行之間的距離,  
讓每一行文字能有些間距,不至於太過擁擠,不易閱讀。  
 
不過行高/行距(Line-Height)除了設定換行文字的間距外,  
還有一個妙用,  
就是在特定情境下,讓單行文字垂直置中。  
 
什麼意思呢?舉例來說好了,我們在網頁上弄了一個選單列,  
假設這個選單列我們希望他高度能有46px,  
裡面有幾個文字連結,文字大小為12級,  
看起來會像是下面 ...full story ››