Codepen是一個非常了不起的網站，優設哥在設計師網址導航上也大力推薦過，得到了很多同學的喜愛，也是全球web前端開發人員的圣地！

我搜索了一些時下最好最流行的codepen（僅限于HTML和CSS）。如果你能把它們融入到設計中去，那么就會大大節省很多時間。

在下面的例子中你會看到各式各樣的片段，HTML 陳列，登錄方式，垂直菜單，甚至時下最流行的主題：扁平化設計（扁平化圖像，扁平化按鈕形狀，扁平化用戶界面要素等）。好好欣賞這些精選的代碼片段吧，如果現在沒時間看完所有的代碼例子，那就保存下來以備不時之需吧。

更多關于前端開發的優秀文章推薦：
《高流量網站CSS開發技術》
《用CSS Tables實現用戶界面開發和交互式布局》
《在線HTML5動畫Banner生成工具》

CSS3 Working Clock

這是一個純css3時鐘。它使用css動畫還有圖形，沒有使用任何圖片或者是js

CSS3 Pricing Table

CSS Loader

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

Twitter Button Concept

CSS3 Loading Animation

Pure CSS3 Vertical Menu with Hover Effect

CSS3 Stamp effect using radial gradients

I Love Blur

Social Navigation

Login

Calendar

Social Footer

Parallax Landscape

CSS3 Thermometer

CSS-Only Responsive Layout with Smooth Transitions

Flat CSS3 Weather Widget

Flat Responsive Sliding Boxes

Tiny CSS3 Round Breadcrumb

CSS3 Hover Effect using :after Psuedo Element

Flat UI Elements

CSS Flat Button Shapes

Email UI

Flat Icons CSS

原文地址：flashuser
譯文地址：960px

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：