CSS

Tailwindgen 這個網站則是提供 Columns、Rows 及 Gaps 三個參數快速產生基礎網格後，再讓使用者依據需求使用滑鼠拖曳出想要的網頁布局，而每次調整都能即時產出預覽網格，最後可以產生 JSX 或 HTML Code，直接複製就可以貼到應用 Tailwind CSS 框架的網頁，相當方便。

TW Icon Fonts 是一個以台灣為主要出發點，用台灣專屬的特色打造出可用於 web 的 wtf、wtf2、svg 格式，桌面使用的 otf 格式，可供 Illustrator，Sketch、 Word、PowerPoint 等軟體來使用，第一個版本是以「台灣旅遊」為主要發想，提供台灣的旅遊景點圖示，內容包含有中華民國國旗、台灣、澎湖群島、龜山島、中正紀念堂、總統府、台北101、故宮博物館、國民革命忠烈祠、龍山寺、國父紀念館、孔子廟、饒河夜市、自行車道、小紅人、小綠人、全民健康保險、珍珠奶茶、台灣啤酒、春聯...等等，共 100 個，圖示具備可縮放、變換色彩等文字相關特性，也能透過 CSS 載入到網頁，持續更新，完全免費。

對學習 CSS 來說，不論是初學或是要進階，有可以參考的語法是相當重要的，畢竟各家瀏覽器支援的 CSS 語法不見得相同，CSS Portal 是一個提供網頁常用到的 CSS 的語法產生器，包含 CSS Box Shadow、CSS Button、CSS Gradient、CSS Flip Switch、CSS Menu、CSS3 Menu、CSS RGBA、CSS Ribbon、CSS3 Rounded Corners、CSS Sprite 、CSS Text Rotate、CSS Text Shadow 、CSS Tooltip 、Layout 、Style Input Range 讓你在製作網頁時，可以即時預覽樣式與語法。

對網站經營與開發者來說，要做好一個網站並不容易，撇開完成開發後要經營的層面來說，光是要讓網頁能夠完美的呈現在電腦、平板、手機各種不同裝置的螢幕尺寸上就是一個不小的課題，再加上各家瀏覽器對 HTML、CSS、JavaScript 等版本技術支援程度各有不同，讓網頁加載的速度也會有差別。網路上有不少網站品質與 SEO的檢測工具，各有各的著眼點，但應該沒人會否認現在網站做得好不好，還是會以 Google 說了算，現在 Google 推 TestMySite 網頁品質測試工具，從友善程度到移動設備的呈現全面幫你的網站總體檢，只要輸入網站網址，除了幫你打分數，還告訴你該如何改進。

初學網頁編輯，除了功能外、美工外，還有排版用到的 CSS，樣樣都不是省心的事情，如果可以靠一些輔助工具來協助，絕對可以事半功倍，Type Anything 是一個可以用視覺化的方式來調整 H1、H2、H3 及 paragraph 等 HTML 元素的 Font family、Font Size、Font weight、Line height、Opacity、Margin top、Margin bottom、Letter spacing、Word spacing 及 Capitalization 等屬性的免費網站服務，每次的調整都會即時反映到樣板文字上，讓使用者檢視，完成調整後，就可以產生 CSS 排版語法，讓使用者複製到要應用的網頁，相當方便。

瀏覽網頁之所以會覺得網站可能沒有回應，原因有可能出在網頁需要運算時間較久、網路傳輸速率較慢或的數據過多...等等，總之，在這之前如果適時地放上一個等待圖示或是加載中，請稍後...的字樣，都比讓用戶空等帶來的好，如果是要放等待動畫圖示，GIF 是個選擇，而另一選擇則是使用 CSS，Uiball.com 這個網站提供 24個以 CSS 打造的等動畫圖示，喜患的就可以直接複製其 html 與 css語法，直接放到想要顯示的位置即可。

製作網頁時，通常會使用到長、寬不等的背景圖，尤其是網頁中每個單元標題內的背景色彩，要產生這種背景時，通常有兩種做法，一是可以使用背景圖片；再來則是使用 CSS 語法，兩種方法各有優缺點。Ultimate CSS Gradient Generator 網站則是以 CSS 語法為主，使用方式相當簡單，可自訂色彩代碼，混入漸層、自訂長、寬後，只要複製其產生的 CSS 語法，便能應用到網頁裡。

漸層色較單一顏色來的有層次感，也深受美工人員的愛用，要用 CSS 做出漸層色，不難，但難在顏色如何搭配，這讓人很傷腦筋的，WebGradients 這個網站提供 180個已經配好色的漸層色彩，並提供 CSS3 語法與 PNG 圖檔，不論是個人或商業均可免費取用。

中華電信又要來為 ADSL / 光世代的客戶主動辦理升速作業了，客戶不須提出申請升速即可免費升級，此次的免費網路升速，包含 ADSL 的 1M/64K、2M/128K、3M/384K 方案與光世代光纖上網 4M/1M、12M/4M 及 50M/10M 六種寬頻速率，自動升速將會自 4月30日起開始執行，由於客戶數量龐大，中華電信將分批進行升速，預估會在六個月內完成， 想要查詢自家的網路何時可被升速，只要連到 https://123.cht.com.tw/webecss/sn132.htm 網址，輸入當初所申請的電話號碼即可查詢，相當方便。

Fonty.io 是個用來分析網站所用的所有字體名稱、字重與字體大小的免費工具，使用者只要輸入網站網址，Fonty.io 就會掃描該網站的 HTML 程式碼，找出包在 CSS 語法中的所有字體名稱，並會分析出每種字體在網站內所占比例及網頁內所用到的字重及字體大小，讓使用者做後續的參考與應用。

取得開源或可以商用的字體不見得會提供每種字體格式，例如我們想要將 TTF 的字型檔轉換成可以在網頁顯示的 WOFF 字型，這時候我們可透過 Font Converter 這個字型轉換免費網站來協助，其支援 bin、cff、dfont、eot、gsf、otb、otf、pfa、pfb、ps、pt3、sfd、svg、t42、tfm、ttc、ttf、woff 及 woff2 等各類字型檔案，轉換成 TTF、OTF、WOFF、WOFF2、EOT 及 SVG 這六種字型檔案格式，以 手寫硬筆書法「隨峰體」來說，轉成 WOFF 字型檔後，我們就可以透過 CSS 將該字型應用到網頁內，增加網頁設計時對字體能有更多的選擇。

在網頁中使用動畫，通常都能吸引到用戶的目光，所以時常可以看到有些網站利用一些 gif 的動畫小圖示，放在希望能引起用戶注意的區塊中，CSS Gradient Animator 是一個以 CSS 語法來產生色彩漸層動畫為主的網站，使用的方式相當簡單，只要利用其設計好的介面點選所要的漸層顏色、漸層角度、滾動角度及動畫的速度等參數，設定好的漸層色彩效果，可以利用 Preview 功能，立即顯示在該瀏覽器的背景，且能自動幫產生相關的 CSS 語法，讓你方便應用到網頁中。