CSS

HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫，可以在網頁中呈現漂亮的提示訊息方塊。 一般在網頁中若要顯示提示訊息，可以使用 title 這個 HTML 屬性，像上面這張圖將 title 設定為 "HTML.css Logo"，所以當你將滑鼠移到圖片上面時，停留一段時間他就會顯示這行提示訊息。 ...

這裡教大家如何自己製作中文的字形檔，並轉為網頁用的字型格式，藉由 CSS 的 @font-face 功能在網頁中使用。 現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能，但是到目前為止這項技術大部份都是應用於英文的字型上，而中文的字型檔由於大小通常都很大，如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔，通常都會讓整個網頁效率大幅下降，所以大部份的網頁中的中文字都比較少使用自定的字型。 ...

這裡介紹 CSS 的 @font-face 使用方式與範例，讓網頁設計者可以在網頁的字型使用上更有彈性。 @font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字，甚至還可以讓設計者使用自己所提供的字型檔，讓網頁的設計更具有彈性，在選擇字型時就可以不需要考慮一般的電腦是否有安裝，凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外，在任何 CSS 條件群組（conditional-group）at-rule 中也可以使用。 ...

這裡介紹如何使用 CSS3 的 animation 功能在網頁上製作動畫，而且不需要使用到 JavaScript。 CSS3 所提供的動畫（animation）功能可以讓網頁元素的 CSS 樣式（style）從一個設定轉換到另外一個，藉著這樣的方式產生動畫的效果。CSS 的再設定動畫時包含兩個部份，一個是用來設定 CSS 動畫的樣式，另外一個則是指定動畫開始、結束或中途路徑的關鍵影格（keyframes）設定。 ...

Colorpeek 是一個查看與分享 CSS 色碼的線上工具，除了顯示 CSS 顏色還可以自動取出圖片的主要顏色。 一般在設計網頁時，一定常常會需要查看某項網頁元素的顏色，或是為某一個網頁元素選擇一個適當的顏色，如果是團隊開發的情況，在多個網頁開發者之間討論顏色時，也會碰到需要互相交流顏色選擇的看法，當然你可以直接將 hex triplet 貼上 Photoshop 這類的會提軟體，看看這個顏色的感覺，調整好顏色之後，再把這個 hex triplet 貼在 Email 寄給另外一位開發者，跟他說這個顏色不錯，但是這樣每次調整顏色時都要開啟 Photoshop 這樣的軟體，其實不太方便。 ...