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. Linux文件系统之INode

    本文转载自阮一峰博客:理解inode 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存51 ...

  2. error out of table range

    .

  3. 中央事件总线 事件驱动架构（EDA） 解析事件总线的4种实现方式

    事件驱动架构(EDA)https://mp.weixin.qq.com/s/nA8XFD2Rx_7qA_LxltGGHw https://mp.weixin.qq.com/s/cD3auglgKzOb ...

  4. 使用Robo 3T操作MongoDB数据库

    安装Robo 3T连接MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/98845789 在IDEA中用三个jar包链 ...

  5. python实现文件查找功能，excel写入功能

    因为要丛UE文档中过滤关键字来统计解码时间,第一次自己完成了一个自动化统计的小工具,用起来颇有成就感. UE文件的内如如下: 需要丛这份关键字中过滤红色标记的两个关键字,取 一个关键字的最后一位,和取 ...

  6. sql 工具类function

    --判断是否为整数 create or replace function is_number(param VARCHAR2) return NUMBER is v_num NUMBER; begin ...

  7. WPF权限控制——【2】模块、菜单、按钮

    周末没有工作,没有写博客,因为觉得休息很必要:曾听到一句话是这样说的:"你们得救在乎归回安息:你们得力在乎平静安稳".当我想到太阳没秒钟要燃烧420万吨的燃料时,想到的就是造物主的 ...

  8. MIT 6.S081 聊聊xv6中的文件系统（上）

    前言 Lab一做一晚上,blog一写能写两天,比做Lab的时间还长( 这篇博文是半夜才写完的,本来打算写完后立刻发出来,但由于今天发现白天发博点击量会高点,就睡了一觉后才发(几十的点击量也是点击量啊T ...

  9. redis分布式锁的这些坑，我怀疑你是假的开发

    摘要:用锁遇到过哪些问题? 一.白话分布式 什么是分布式,用最简单的话来说,就是为了较低单个服务器的压力,将功能分布在不同的机器上面:就比如: 本来一个程序员可以完成一个项目:需求->设计-&g ...

  10. 2020牛客暑期多校训练营（第八场）Interesting Computer Game

    传送门:Interesting Computer Game 题意 给出n对数,你可以操作n次,每次操作只能在下面三种中选择一种,问最多可以选多少个不同的数字. 什么都不做 如果a[i]以前没选过,那么 ...