對於一般網頁設計師而言，對CSS的刻板印象只在於樣式設計方面，能讓你更容易設計出具有吸引力的網頁，但事實上，他的能力比你想像中還來得複雜，用CSS一樣可以做出豔麗的效果，例如純動畫及互動元件，當然，如果搭配HTML、Javascript，又能激發更多的創意變化。
瀏覽器就像是一個空白的畫布，最重要的還是你能不能運用靈感，在這張畫布上發揮你的創意，在這裡，將介紹18個使用CSS來打造的創意作品，從最簡單的字體到動畫 ，相信都能讓你對CSS有所改觀。
小小兵 華麗板
如果你無法抵抗小小兵的熱潮，看到Amr Zakaria 使用純CSS作出來的小小兵動畫，可能會讓你情緒瞬間瘋狂激動起來。 冷靜一下，看動畫前請小心慎入~
辛普森家族
由Chris Pattle打造的辛普森整個家族大頭貼動畫，將他們的表情及特色都描述的相當出神，甚至能從畫面感受到這些人物的呼吸。
Long~貓
首先，你會看到一隻可愛、聽著音樂在扭動身體的貓咪，你可以試著調整瀏覽器的寬度，貓的身體將會隨著瀏覽器寬度而彈性的變化，從窄跟長寬度，你發現到一些可愛的動畫設計了嗎?
CSS 表情符號
bennettfeely 作了一個類似表情符號產生器的功能，讓使用者可以根據喜好來選擇眼睛、鬍子、嘴巴、牙齒等效果，然後就能夠產生具有獨特個性的CSS小人物瞜。可以去玩看看。當然別忘了同時欣賞一下這件CSS作品
CSS Creatures
起司
嗯~ 對. 就只是一張起司圖，但你別忘了這個三D起司畫面是用純CSS畫出來的~ 連結: Hugo Giraduel - Cheese
維京人盾牌
由 LukyVj 作出來的盾牌，會讓人很難分辨就竟是使用CSS還是用影像編輯軟體作出來的~
透平的icon及液態移動的選單目錄效果
使用滑鼠在選單上移動，試著感受流暢的動態及具有特色設計風格，其中最特別的就是透明的icon標誌。
Fluid menu with transparent icon
網格動畫效果
一般來說，想要設計出動畫都是具有一定的困難度，因此更不用說這是用純CSS作出來的網格相片牆~
用CSS+單一元素 設計出一個人物
雖然畫面上看起來沒有太大的驚喜，但是如果你是瘋狂的CSS粉，Hugo Giraudel的作法反而會引起你的興趣，他只使用了一個元素，就打造出了8 bit的人物圖像，有興趣的人可以研究看看~
搖滾可樂
這也是一個滿有去的作品，當你左右移動，慢慢的他就會看起來很像在旋轉，也是一個用純CSS作出來的作品~ (如果用chrome看不出滾動效果的話，可以試看看其他瀏覽器)
計算機
一個使用CSS+Javascript打造的計算機。畫面看起來平易近人~
蘋果 iOS7 按鈕~
由Dan Eden 經由iOS7啟發而設計出來的CSS3 按鈕，你可以試著去體驗，看看有沒有熟悉的感覺~
霓虹燈
這個例子運用CSS來實現霓虹燈的標示效果，讓人感覺很真實，你可以試著移動滑鼠到圖案上面，霓虹燈上的字母將會有一些互動的效果喔。
動態勾選按鈕
Sascha Michael Trinkaus 使用漸層的方式設計出具有時尚高質感的按鈕，並且，點擊後會有出色的互動特效~
小小兵 簡易版
這是另一個小小兵的作品，畫面都是使用CSS的方式來建構，當然，他沒有附加任何的效果，但是應該能感受到能用CSS調製出相當出色的作品時，會讓人感受更加特別，
SVG選單效果
一個運用SVG設計出的平滑選單按鈕效果 Menu toogle SVG animation
CSS遮罩效果
通常，設計遮罩效果都會搭配javascript來完成，但這個範例則是使用純CSS來作到同樣的動作~
Loader 效果
這裡有許多可以應用在網頁loading畫面的效果，都是使用CSS來完成的~ 效果及動畫設計也都相當細膩
Single Element CSS Spinners & Loaders
參考連結: hongkiat 18 Cool Things You Won’t Believe Were Built Using CSS