幾個簡單的CSS繪製圖標

CSS是網頁設計師和前端人員需要了解的一門語言,特別是現在的扁平化設計,這類設計大部分佈局、交互動畫甚至圖標都會使用CSS3,所以我們應該熟練掌握CSS樣式語言。今天為你整理幾個CSS繪製的圖標,同時從中學習一些編寫方法,圖標是免費的,也可以將它用到你的網頁設計上。

Pure CSS Clok

瀏覽網址:http://codepen.io/MyXoToD/pen/psLen

 

CSS Flat Wallet Icon

瀏覽網址:http://codepen.io/prowebix/pen/yKGez

 

Device In Pure CSS

瀏覽網址:http://codepen.io/andreasstorm/pen/iqLGn

 

Hanging Picture Frames

瀏覽網址:http://codepen.io/PaFF/pen/khydI

 

CSS Hamburger Icon

瀏覽網址:http://codepen.io/elijahmanor/pen/GxCAn

 

Progress Button Styles

瀏覽網址:http://tympanus.net/codrops/2013/12/12/progress-button-styles/

 

Creative Button Styles

瀏覽網址:http://tympanus.net/codrops/2013/06/13/creative-button-styles/

 

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s