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

codepen 上25个最受欢迎的HTML/CSS代码的更多相关文章

  1. GitHub 上一份很受欢迎的前端代码优化指南

    http://segmentfault.com/a/1190000002587334?utm_source=weekly&utm_medium=email&utm_campaign=e ...

  2. 25个强大的CSS代码，据说这些是开发者经常遇到比较棘手的代码

    这些代码是经常用到的,比方说一些特殊的效果,圆角边框,CSS透明度,梯形环绕,CSS小三角等,希望对你有用 1简单又好的 Blockquote 样式 CSS代码如下 blockquote { back ...

  3. Mac上使用Visual Studio Code开发/调试.NET Core代码

    Mac上使用Visual Studio Code开发/调试.NET Core代码 .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今 ...

  4. 已经在Git Server服务器上导入了SSH公钥，可用TortoiseGit同步代码时，还是提示输入密码？

    GitHub虽好,但毕竟在国内访问不是很稳定,速度也不快,而且推送到上面的源码等资料必须公开,除非你给他交了保护费:所以有条件的话,建议大家搭建自己的Git Server.本地和局域网服务器都好,不信 ...

  5. 开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码

    开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码. 开源地址: https://github.com/jkpang/PPRows

  6. warning MSB3245: 未能解析此引用。未能找到程序集“CemeteryBLL”。请检查磁盘上是否存在该程序集。 如果您的代码需要此引用，则可能出现编译错误。

    多层架构,在每次重新生成解决方案的时候,老是提示:warning MSB3245: 未能解析此引用.未能找到程序集“CemeteryBLL”.请检查磁盘上是否存在该程序集. 如果您的代码需要此引用,则 ...

  7. 实用的60个CSS代码片段[上]

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  8. 高效整洁CSS代码原则（上）

    CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...

  9. 每天看一片代码系列（三）：codepen上一个音乐播放器的实现

    今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...

随机推荐

  1. Python編碼格式錯誤解決方案及案例

    Python格式錯誤解決方案及案例 這幾天在玩爬蟲,在解析和提取内容時經常出現由於内容格式問題導致出錯,為防止以後出錯,整下一下,以下是這幾天的總結: 1. 特殊符號或表情符號等 背景:爬取一個烹飪教 ...

  2. Django QuerySet API---数据库接口

    基本的创建与查询 # -*- coding: utf-8 -*- from django.http import HttpResponse from TestModel.models import T ...

  3. your service shouldn’t know anything about HTTP headers, or gRPC error codes 干净架构 服务不应知道 HTTP头、gRPC错误码 服务仅知道服务相关的

    Go kit - Frequently asked questions https://gokit.io/faq/ Services - What is a Go kit service? Servi ...

  4. Nginx配置代理gRPC的方法

    Nginx配置代理gRPC的方法_nginx_脚本之家 https://www.jb51.net/article/137330.htm

  5. from unittest import TestCase

    from unittest import TestCaseBigInteger/Big_Integer.py at master · YulitaGap/BigInteger https://gith ...

  6. 详解Java8特性之新的日期时间 API

    详解Java8特性之新的日期时间 API http://blog.csdn.net/timheath/article/details/71326329 Java8中时间日期库的20个常用使用示例 ht ...

  7. Java，面试题，简历，Linux，大数据，常用开发工具类，API文档，电子书，各种思维导图资源，百度网盘资源，BBS论坛系统 ERP管理系统 OA办公自动化管理系统 车辆管理系统 各种后台管理系统

    Java,面试题,简历,Linux,大数据,常用开发工具类,API文档,电子书,各种思维导图资源,百度网盘资源BBS论坛系统 ERP管理系统 OA办公自动化管理系统 车辆管理系统 家庭理财系统 各种后 ...

  8. java中的IO处理和使用，API详细介绍（一）

    写在前面:本文章基本覆盖了java IO的全部内容,java新IO没有涉及,因为我想和这个分开,以突出那个的重要性,新IO哪一篇文章还没有开始写,估计很快就能和大家见面.照旧,文章依旧以例子为主,因为 ...

  9. 26.Apache

    1.Apache简介 Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源代码的网页服务器软件,可以在大多数电脑操作系统中运行,由于其跨平台和安全性(尽管不断有 ...

  10. Cisco的互联网络操作系统IOS和安全设备管理器SDM__管理Cisco互联网络

    1.如果不能远程登录到一台设备上,可能是由于远程设备上没有设置口令.也可能是由于访问控制列表过滤了远程登录会话. show users:检查都有哪些设备连接到了此路由器. clear line #:清 ...