超赞!源自codepen的25个最受欢迎的HTML/CSS代码

2013/11/26 23599

Codepen是一个非常了不起的网站,优设哥在设计师网址导航上也大力推荐过,得到了很多同学的喜爱,也是全球web前端开发人员的圣地!

我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS)。如果你能把它们融入到设计中去,那么就会大大节省很多时间。

在下面的例子中你会看到各式各样的片段,HTML 陈列,登录方式,垂直菜单,甚至时下最流行的主题:扁平化设计(扁平化图像,扁平化按钮形状,扁平化用户界面要素等)。好好欣赏这些精选的代码片段吧,如果现在没时间看完所有的代码例子,那就保存下来以备不时之需吧。

更多关于前端开发的优秀文章推荐:
《高流量网站CSS开发技术》
《用CSS Tables实现用户界面开发和交互式布局》
《在线HTML5动画Banner生成工具》

CSS3 Working Clock

这是一个纯css3时钟。它使用css动画还有图形,没有使用任何图片或者是js

clock-codepen

CSS3 Pricing Table

pricing-table-codepen

CSS Loader

loader-css-codepen

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

flat-devices-codepen

Twitter Button Concept

twitter-button-codepen

CSS3 Loading Animation

css3-preloader-codepen

Pure CSS3 Vertical Menu with Hover Effect

vertical-menu-codepen

CSS3 Stamp effect using radial gradients

stamp-effect-codepen

I Love Blur

blur-effect-codepen

Social Navigation

social-navigation-codepen

Login

login-form-codepen

Calendar

calendar-codepen

Social Footer

social-footer-codepen

Parallax Landscape

parallax-landscape-codepen

CSS3 Thermometer

thermometer-codepen

CSS-Only Responsive Layout with Smooth Transitions

responsive-layout-codepen

Flat CSS3 Weather Widget

weather-widget-codepen

Flat Responsive Sliding Boxes

flat-boxes-codepen

Tiny CSS3 Round Breadcrumb

round-breadcrumb-codepen

CSS3 Hover Effect using :after Psuedo Element

flat-menu-codepen

Flat UI Elements

flat-ui-elements-codepen

CSS Flat Button Shapes

flat-button-shapes-codepen

Email UI

flat-email-ui-codepen

Flat Icons CSS

flat-icons-codepen

原文地址:flashuser
译文地址:960px

================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量58万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/25-html-css

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里