CSS

CSSnippets 是一個提供 CSS 範例的免費網站，專門收錄多種常用的 CSS 樣式和效果，包括 Button、Box-shadow 、Card、Checkbox、Dropdown、Input-fields、Loading-spinner、Radio、Text 及 Toggle Switches 等。所有範例都可以在 CSSnippets 網站上直接操作，並顯示實際應用效果。使用者只需根據所需的 HTML 元件類別或 CSS 效果，尋找相應的範例，然後將範例中提供的 HTML、React 及 CSS 程式碼複製到自己的專案中，非常方便。

CSS Loaders 收錄了超過 600 個以 CSS 製作的載入動畫範例，並根據形狀或動作分為近 40 種分類，包括 Classic、Dot、Bar、Dot VS Bar、Spinner、Shape、3D、Progress、Wobbling、Infinity、Zig-Zag、Wavy、Flipping、Pulsing、Cut、Blob、Arrow、Maze 及 Line 等。每個 Loader 都可以在線上預覽，並且一鍵就能複製所需的 CSS 語法以供後續使用。

Canva 現在不只是平面設計工具！還能幫你寫程式並直接發佈成網站！全新推出的「Canva AI 寫程式功能」，讓使用者只須描述程式功能就能由 Canva AI 在平台內編寫 HTML、CSS 和 JavaScript，快速完成小型 Web 應用程式、互動頁面或簡易應用，並且一鍵發佈成真正的網站，開啟網址後任何人都可以瀏覽與使用，不需架設伺服器、不需設定網域，就能以自己的 Canva 子網域（如：你的名稱.my.canva.site）直接分享程式作品，實現「零門檻網站開發」的願望。

有相當多的網站有提供免費英文字型的下載服務，像是 Fontennium 或 FontSpace，再進階點的像是 Google Font Directory 由 Google 所提供的 CSS 英文字型，讓網頁字型應用更簡單 都提供了相當不錯的英文字型，可供下載，acefreefonts 也提供了 A - Z 相當豐富的字型下載服務。當然若是在電腦裝了很多字型，當要運用時，也可以透過像是 FontViewOK 字型檢視工具，檢視所有字型﹝免安裝﹞或是 Font.colorfull 線上字型檢視器，一次列出所輸入的文字所有字型樣式 等工具來協助，找出最適合的字型。如果需要中文的字型，也可參考 免費中文字型下載﹝王漢宗教授自由字型﹞、教育部標準字體3套，免費中文字型下載 或是 ｢中文全字庫｣免費的書法字型下載。若在 Windows 內安裝字型有困難請參閱 如何在Windows7安裝新字型。

網頁中的字型呈現，都是以瀏覽者電腦有安裝的字型為主，因此，即便是網頁製作時，所使用的字體有多美觀，除非瀏覽者的電腦有相同的字型。為解決此一困擾，因此便有網頁字型託管服務，像是 Google web fonts 由 Google 所提供的網頁字型應用服務 便是一例，現在，Adobe 也推出的 Edge Web Fonts 免費網頁字型託管服務，提供超過 500 種以上的免費字型，其中也包含所有在 Google Web Fonts 裡的開放原始碼字型，使用時，只需要將其生成的 JavaScript 語法複製到網站裡，便能以 CSS 的 font-family 方式來使用該字型，相當方便。

想要取得網站所搭配的顏色代碼，最快速的做法就是將網頁擷取成圖片，然後透過圖片編輯器內的取色工具去取得顏色代碼，另外一種就是去讀取該網站內含的 CSS，前者取得的色彩可能有偏差，而後者又很麻煩，但取得的顏色代碼絕對正確，而現在後者這麼麻煩的動作，可以由 alwane.io 這個網站來幫你代勞了，使用者只需要將網址輸入，該網站就會自動幫你擷取 CSS 內所有的顏色代碼，並且將相近的顏色以色塊的方式進行分組呈現，另外，如果是已知的 CSS 或是顏色代碼，也可以直接貼到 alwane.io 網站來分析。

想要轉貼網頁上的圖片，通常在取得圖片的原始網址後來進行轉貼，但對於不熟 HTML 或 CSS 語法的人來說，想要轉貼圖片其實也是種困惱，BigImg.it 網站就提供了免費圖片轉貼語法產生服務，只要取得原始圖片的網址後，就可重新設定圖片尺寸大小及定義圖片顯示位置，並在設定後，產生 iframe 語法，複製該語法就可以貼到自己網頁裡想要顯示圖片的位置。

網頁有需要使用色彩漸層來布置時，有些人會使用圖片來避開因不同瀏覽器對 CSS 支援各有不同的問題，但也有網站採主要瀏覽器才支援的 CSS 語法來支應，Blend-CSS 是一個可以線上產生漸層色彩的 CSS 語法產生器，操作方法非常直覺，透過設計好的左、右可選不同色彩的介面，直接就可混合成漸層色彩，且可直接預覽，滿意後，就可複製其產出的 CSS 語法，放到網頁要應用的地方，相當方便。

CSS 版本進展到 CSS3.0，讓以往需要靠圖片來輔助才做得到的效果，變得只需用 CSS 即可，例如邊框特效、色彩展示、圖形變化、動畫、轉換特效、文字色彩、文字陰影、區塊陰影、文字旋轉...等，不過標準有了，語法的學習上卻變成是個門檻，還好，線上有很多關於 CSS 產生器，像是按鈕、陰影、圓角...等，如果對 CSS 語法陌生，又想產生圓角邊框，可以來試試 border radius 這個線上的 CSS 圓角框產生器，簡單方便。

網站的製作不論是初學程式或已經是高手，可能都會覺得寫 Code 來實現功能會比對網站整體顏色該如何配置來的簡單許多，因為，如何用色才能得滿分，始終是沒有標準答案的，只能說用傳統常見的顏色呢就是中規中矩，若用色大膽，有人欣賞就是創新，沒人欣賞就便垃圾了。當然，我們也可以到 BrandColors 這個網站來參考與了解知名網站是如何進行顏色搭配的，若覺得喜歡，也可下載該網站的用色 CSS 檔案，方便後續的應用。

製作網頁時，難免會有需要讓使用者點擊的地方，若只是用文字來敘述，雖然簡單明瞭，但卻顯得單調，想要放個按鈕圖示，但卻又礙於要使用圖片，牽涉較廣，若有這些問題，可以來試試這個可以說是 CSS 按鈕寶庫的 Buttons 線上 CSS 按鈕產生器，不但提供 Flat、Glow、Rounded、3D、Border、Pill、Circle、Dropdown(下拉選單)、icon、Square、Block 等各式各樣的按鈕，且配色相當豔麗，使用上更是簡單，只需在網頁特定位置，載入相關連結後，複製想要使用的按鈕樣式到網頁想要應用的位置即可。

對初學網頁製作的人來說，當需要對「按鈕」元件進行美工時，若能參考別人寫好的 CSS Code 是一個事半功倍的好方法。Call-to-Action Button Generator 是一個可即時預覽的 CSS 按鈕線上產生器，不但提供按鈕顏色、文字、陰影、ICON 等屬性自訂外，還可自動產生所需的 CSS Code 與 PNG 圖檔，讓使用者方便影用到網頁的任意處，相當方便。