如果提到 CSS，你會想到什麼呢？一般來說，階層式樣式表通常用來為結構化文件（例如 HTML、XML）加入樣式，當我們在瀏覽網頁時，包括內容顏色、字型和排版等看得到的顯示特性皆為 CSS 範疇，但你知道嗎？國外有許多技術高手，還會利用 CSS 來畫圖，聽起來很神奇，密密麻麻的程式碼也可以繪製出美麗圖案，最近有日本設計師以 CSS 打造出一套純 CSS 英文字型，開放給所有使用者免費下載。

CSS SANS 是一套單純以 CSS 程式碼來設計的字型，包含 A 到 Z 的所有英文字母（不過沒有小寫），這套字型設計精簡、可透過程式碼來直接顯示，更重要的是它也紀錄了網頁發展演進歷史，從網站 Archive 頁面可以發現當 CSS SANS 被用於古老的瀏覽器上，字元是沒辦法正確顯示的，因為當時瀏覽器並不支援一些現今的 CSS 語法。

至今 CSS 已經發展到 CSS3，而且被多數主流瀏覽器支援，在運用上也更有彈性、能做出更多變化，如果你也喜歡 Pure CSS Design，不妨到 CSS SANS 來看看這個日本團隊是如何以純 CSS 打造這麼一套字體，專案採開放原始碼，同時也把 CSS SANS 轉為 .ttf、.otf 字型檔提供給需要的使用者下載。

網站名稱：CSS SANS
網站鏈結：http://yusugomori.com/projects/css-sans/

使用教學

STEP 1

CSS SANS 在 Fonts 頁面列出所有 A 到 Z 英文字母的 CSS 語法。

將滑鼠游標移動到 CSS 語法上方，還會標記這段語法主要是建構字元符號的那一部份，對於想要學習 CSS 設計的朋友來說是個不錯的教材。

STEP 2

從網頁的 Archive 頁面可以看到，當 CSS SANS 在不同瀏覽器使用時，也會呈現出稍有差異的效果，不過當用於現今主流的瀏覽器時，CSS SANS 都能夠很正確顯示。

STEP 3

最後開啟 Download 頁面，就能將 CSS SANS 的原始碼（Source Code）打包下載，網站也提供了簡易的使用範例。別忘了頁面下方還有 CSS SANS Font Kit，如果你想在一些文書編輯或繪圖軟體上使用 CSS SANS 字型，可以下載字型包來進行安裝。

喜歡免費資源網路社群的文章嗎？歡迎追蹤我們的 Facebook、Twitter 和 Google+，或是透過 Email 訂閱更新。

還記得去年底找到一個很棒的 HTML5 網站模版下載網站 Templated，真的是網站開發者的好朋友，至少我們不用從無到有、從頭到尾來打造一個網站，而是直接就現有的樣版去做修改或調整，讓建置網站難度降低許多，也減少花費的時間和開支。

之前網友推薦我一個名為 HTML5 UP! 的網頁設計下載網站，提供大量 HTML5 模版，而且這些模版都支援響應式網頁設計（Responsive Web Design, 簡稱 RWD），也是俗稱的「自適應網頁設計」，透過自動彈性調整畫面設計，以改變佈局方式來使不同大小螢幕皆能正常瀏覽，達到最好的使用體驗。

因為自適應網頁設計在開發上較為繁瑣，一般很少免費提供下載的網站，但 HTML5 UP! 收錄一系列共 28 種網頁設計，通通都是 HTML5+CSS3 並有響應式設計功能，網站採用的授權方式為 Creative Commons 姓名標示 3.0，也就是說你可以自由分享、修改這些模版，唯獨需要保留網頁裡的姓名標示（Attribution）。

如果你喜歡這位設計師的作品，那可在 Pixelarity 網站找到更多模版下載，不過這網站是採用訂閱計費方式，最便宜方案為每三個月 $19 美元，可自由下載所有的網頁設計。

網站名稱：HTML5 UP!
網站鏈結：http://html5up.net/

使用教學

STEP 1

HTML5 UP! 網站提供的模版都具有一定的品質，使用的圖片大多為免費圖庫而來，採用的是 CC0 授權，一般來說要放在網頁上、或者置換掉都沒有問題。從網頁裡可以點選任何一個設計的 Live Demo 進行即時預覽，或者 Free Download 免費下載。

STEP 2

HTML5 UP! 的即時預覽（Live Demo）功能蠻好用的，除了可以讓你即時操作網頁、查看整體效果外，從左上角還能切換不同大小螢幕裝置，例如桌面、平板電腦、手機，就能即時看到「響應式網頁設計」效果。

這是其中一個模版 Strata 在桌面瀏覽器的呈現效果：

切換到平板電腦時，螢幕寬度雖然縮小，但可以發現網頁設計沒有太大變化。

一旦切換到手機大小，網頁就自動縮成一行，不過依然保持原有的設計，並且能夠正常顯示網頁上的內容，這就是自適應網頁設計的特色。在 HTML5 UP! 裡提供的樣版皆支援自適應設計，喜歡的話點選右上角的 Download 即可免費下載！

STEP 3

下載時不用註冊、也無須登錄任何資料，可以的話，記得順手幫 HTML5 UP! 按個讚，或是加入追蹤，讓這個網站可以被更多人看到。

喜歡免費資源網路社群的文章嗎？歡迎追蹤我們的 Facebook、Twitter 和 Google+，或是透過 Email 訂閱更新。