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

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

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

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

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

RWD(Responsive Web Design),  
這個我們稱為響應式網站設計的東西,是很方便好用,  
不用再大費周章針對不同的平台設計不同的系統,  
只要透過一個 CSS 的文檔,就可以一打十個 ^^  
 
不過要用這種葉問等級的方式來設計,其中的學問倒也是不少的 :)  
 
其中一個最常見的問題就是嵌入 Youtube 的影片了。 ...full story ››

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

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

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

當我們在使用CSS語法中的這個Line-Height(行高/行距)這個指令時,
大多是用來設定一個文字段落中,行與行之間的距離,
讓每一行文字能有些間距,不至於太過擁擠,不易閱讀。

不過行高/行距(Line-Height)除了設定換行文字的間距外,
還有一個妙用,
就是在特定情境下,讓單行文字垂直置中。

什麼意思呢?舉例來說好了,我們在網頁上弄了一個選單列,
假設這個選單列我們希望他高度能有46px,
裡面有幾個文字連結,文字大小為12級,
看起來會像是下面 ...full story ››

[CSS:Justify]讓中英文混搭的文字,左右齊行

有朋友來信問說,
在他的網頁上,常有中文混搭著英文或者是特殊符號,
以致於在每一個段落的尾端,總是有點坑坑巴巴的,
雖不至於有多難看,
但總是希望能像在 Office Word 中那樣,
能設定一下左右齊行的文字對齊方式。

其實這個左右齊行的文字對齊功能,
在CSS的語法裡,是一直都存在的喔,不過似乎較少人使用 ...full story ››

[CSS3:text-overflow]將過多的內文自動刪減為適合的長度

在設計或撰寫網頁內容時,有時候我們不希望某個區塊內的文字太長,導致整個版面顯得雜亂擁擠。
例如在頁面側邊欄,我們經常會顯示『最新留言』、『最新文章』等等,如果這些文章標題的字數過多,礙於側邊欄的寬度,每一則顯示的文章標題就會自動換行,把整個側邊欄也擠的很長。感覺就會很雜亂 ...full story ››

[CSS:float]去除in-line物件中間的空白

我們經常會使用一個CSS的語法:display:inline-block,來使多個物件保持在同一行的橫向水平中顯示。
例如頁面上方橫向的圖片選單。
但如果在HTML原始碼中,這些需要擺在同一行的物件是換行寫的,
列如 ...full story ››