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. 如何将1rpx转为1rem

    最近我在开发的过程中,出现了一个需求,我需要把开发好的小程序倒模成H5页面,这里就涉及一个布局单位问题,我们小程序用的单位都rpx,是按照750rpx铺满整个页面来算的,可H5又不支持rpx单位,这里 ...

  2. linux设备文件

    一.前言 在调用了alloc_chrdev_region函数或register_chrdev_region函数之后可以在/proc/devices中看到该设备的主设备号,比如我注册的hello模块的主 ...

  3. Cisco之show基础命令

    #show  version:显示版本信息等 #show running-config:显示当前(活动,并不一定保存)的配置 #show interfaces fastEthernet 0/1:进入接 ...

  4. 为什么要内存对齐？Go 语言有时也需要考虑对齐的问题

    https://mp.weixin.qq.com/s/NE6Y2TVxrl-cpY-36puQcQ

  5. 僵尸网络（botnet）概念浅析

    僵尸程序 僵尸程序是用于构建僵尸网络以形成大规模攻击平台的恶意代码.僵尸网络是被黑客集中控制的计算机群,其核心特点是黑客能够通过一对多的命令与控制信道操纵感染僵尸程序的主机执行相同的恶意行为,如可同时 ...

  6. tarjan复习笔记 双连通分量，强连通分量

    声明:图自行参考割点和桥QVQ 双连通分量 如果一个无向连通图\(G=(V,E)\)中不存在割点(相对于这个图),则称它为点双连通图 如果一个无向连通图\(G=(V,E)\)中不存在割边(相对于这个图 ...

  7. LOJ10129

    AHOI 2009 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为 nn 的数列,不妨设为 a1​,a2​,⋯,an​.有如下三种操作形式: 把数列中的一段数全部乘一个值: 把 ...

  8. xss靶场详解

    一个XSS靶场练习记录 https://blog.csdn.net/qq_41500251/article/details/101116697 001.level 1 反射型 1.观察源码 <s ...

  9. BootstrapValidator验证规则、BootStrap表格：列参数

    BootstrapValidator验证规则 需引用组件 <script src="~/Scripts/jquery-1.10.2.js"></script> ...

  10. 并发编程补充--方法interrupted、isinterrupted详解

    并发编程 interrupted()源码 /** * Tests whether the current thread has been interrupted. The * <i>int ...