初識 CSS 排版大師 Flexbox (一)

在從 table 轉往 div 排版的過程中,編排一個需要彈性等高的田字形的 Layout,或是要將內容垂直置中,一定曾在某個時刻讓人心碎過。這種 Layout 用 table 很容易達成,但改成 DIV 的方式卻又很費心,甚至有時還得來點 JS 才能解決,對視覺設計師來說,實在很討厭。
Continue reading “初識 CSS 排版大師 Flexbox (一)"

網站 icon 生成器,一鍵通殺全平台。

記得早期做網頁的時候,在網站完成後會另外畫一個 16×16 的小 icon,這個小 icon 會出現在網址列及我的最愛中,取代瀏覽器原本的預設 icon,成為一點私人的小特色。但後來由於設備的發展一日千里,手機、平板、iOS、Android、MAC、Windows 等等,每種平台對這些小 icon 接受的大小、格式及規範都有些許不同,如果要個別針對這些平台去製作小 icon 變得有點麻煩,且不一定有相關的設備可以提供測試,這時,該怎麼辦呢?
Continue reading “網站 icon 生成器,一鍵通殺全平台。"

Webfont 的思源黑體終於來了!

先前我們介紹 Google Fonts 早鳥方案時,有提到 Google 目前有提供五套中文的 Webfont,當時還有點遺憾裡頭沒有大家注意許久的思源黑體。其實仔細想想,就會發覺標準版的思源黑體不太適合用在目前的網路環境中。因為光一組標準的思源黑體就有 15-16mb 大,如果還要考量提供不同粗細的字體時,字型下載可能就要佔去 40-50mb,以目前的網路條件來說的確有點過大。加上網站行動版本佔整體流量的比重越來越多,40-50mb 的下載量對行動網頁會是很大的負擔!畢竟不是每一位使用者的手機都採用不限流量的網路方案,字型大小與網路流量兩者間勢必要做一些取捨。
Continue reading “Webfont 的思源黑體終於來了!"

Animate.css:CSS 動畫

過去我們在處理 CSS3 的動畫時,需要去了解 @keyframes 的使用方式,常常為了一個動畫效果的呈現,做了許多的嘗試才找自己的到滿意的設定,這其實挺花時間的。因此,有人就想說:何不先把常用的動畫預先編寫完成,以後需要這些效果的時候就可以直接調用,這樣豈不省事又方便。設計師 Daniel Eden 將網頁或 UI 常用的動態效果,如:淡入淡出、翻頁、旋轉、上下左右的位移、變形等1l集結成 Animate.css,而且還以 MIT License 的方式免費釋放出來給大家使用。鄉親們,有沒有啾甘心 🙂
Continue reading “Animate.css:CSS 動畫"

Hover.css

CSS3 寫的 Hover 效果,內容涵蓋 2D、背景、Icon、邊框、陰影和光暈、各種方向的對話框及折角的轉換,部分效果需要使用新式的瀏覽器才能支援,以 MIT 的方式對外授權釋出,可以自由應用在各式連結、按鈕、Icon上。如果要加上 Icon 的效果,請另外下載 FontAwesome (如何使用 FontAwesome),支援 less 及 scss。
Continue reading “Hover.css"

水波紋的按鈕回饋

在 UI & UX 的設計上,按鈕的回饋在設計上是一個需要反覆推敲的重點。目的是要提醒使用者目前的動作是什麼。一般常見的回饋方式有改變顏色、置換 ICON、轉換按鈕造型等等多種方式。其中,水波紋的效果因為 Google 的 Material Design 的採用,也開始被大家所接受。Subtle Click Feedback Effects 提供了 22 種各式水波紋的回饋效果,而且包含相關的原始碼,讓你可以藉由線上讀範例,馬上將各種水波紋彙整到需要的網站裡。(完)

PS. IE 10 不支援這個效果。

Transformicons:為 Icon 增加動態效果

目前一般的網頁 Iocn 都是靜態的,頂多用 Gif 表現一些簡單的效果,如果要像 Flash 可以有一個平滑的動畫效果,往往還需要借助程式設計師為這些動畫編寫相關的程式碼。這對視覺設計師來說,會產生一個問題,那就是對畫面失去部分的掌握,往往需要等到程式設計師處理完後,再由視覺設計師做最後的潤飾,在案件急迫或客戶預算有限的形況下,很容易產生執行上的困難。因此,對視覺設計師來說會希望有一個簡單的工具來幫助他處理類似的問題。

對於這個問題 Transformicons 顯然注意到了。它提供一系列由 SVG 及 CSS 組成的動態 Icon,像是常用的選單、網格、新增、刪除、寄信、載入等等動態效果,而且你只要透過點選 Builder 的按鈕,然後勾選你需要的動態效果,就可以直接在線上產生相關的程式碼。讓視覺設計師在製作網頁的時候能夠直接複製貼上,不用為這些可以添加畫面趣味的小動畫傷腦筋。(完)

讓網頁設計師會心一笑的 CSS 雙關語

任職於澳洲墨爾本 SEO 公司的 Saijo George,因為工作的關係時常需要蒐集各類型的資訊,他在 reddit 看到一篇關於 CSS 雙關語的討論,內容由歷史、天文、政治、商業、建築、小說、懸疑事件等等所組成,並透過標準的 CSS 來呈現這些事件,讓人乍看之下以為只是一般的 CSS,但仔細檢視內容後,又發現這些 CSS 別有洞天。Saijo George 覺得十分有趣,將這些由網頁設計師們提供出來的 CSS 笑話收錄分享到 CSS Puns & CSS Jokes 裡。
Continue reading “讓網頁設計師會心一笑的 CSS 雙關語"

如何讓表格中的行及列同時 Highlight?

要將表格中的某一行 Highlight 起來很容易,你只要 tr:hover{background:yellow;} 就可以完成。但,如果你想同時 Highlight 行及列的時候,麻煩就會出現,因為在現有的 HTML & CSS 中,沒有針對「列」的設定。對於這個問題 MATT WALTON 提出一個解決的方式。
Continue reading “如何讓表格中的行及列同時 Highlight?"

Google Fonts 提供五種中文 Webfont,早起的鳥兒有的玩

還在等待 Google 思源黑體的 Webfonts 嗎?現在 Google Fonts 早鳥頁開始提供黑體、仿宋、明體、楷體及圓體等五種中文 Webfonts 供大家測試使用。剛試了一下,基本的顯示沒什麼問題,行動設備的顯示非常優秀 (黑體),線條銳利清晰,桌面端則還有在優化的空間;但黑體字的部分,看起來似乎不是大家期待已久的思源黑體,也許 Google 還有其他的考量。由於目前中文的 Webfont 只是測試階段,使用上還有一些小問題,像是粗體的時候,部分文字會出現簍空的情況,現階段不建議用在正式的網頁裡,比較適合想嘗鮮的朋友玩看看。
Continue reading “Google Fonts 提供五種中文 Webfont,早起的鳥兒有的玩"