我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS)。如果你能把它们融入到设计中去，那么就会大大节省很多时间。
在下面的例子中你会看到各式各样的片段，HTML
陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计(扁平化图像，扁平化按钮形状，扁平化用户界面要素等)。好好欣赏这些精选的代码片段吧，如果现在没时间看完所有的代码例子，那就保存下来以备不时之需吧。
CSS3
Working
Clock
这是一个纯css3时钟。它使用css动画还有图形，没有使用任何图片或者是js
CSS3
Pricing
Table
CSS
Loader
Pure
CSS3
MacBook
Air
with
Thunderbird
Display
and
Keyboard
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
UI
Flat
Icons
CSS
在一个id为bt1的按钮上设置样式，如下：
#bt1{
font-family:微软雅黑 <!-- 字体 --> width: 60px <!-- 宽度 -->height:30px <!-- 高度 -->
font-size:14px <!-- 字体大小-->
color:gray <!--字体颜色 -->
border: 1px solid red； <!-- 边框；边框宽度、单线、边框颜色 -->
margin-left: 10px <!-- 左边距，相应的还有右边距margin-right, 上margin-top,下 margin-buttom -->
background-color:#F1F1F1 <!--背景色；十六位颜色表示时前加#符号
transparent是透明-->
box-shadow:10px 10px 10px gray <!-- 阴影；x轴偏移（右偏为正），y轴偏移（向下 为正），模糊度，模糊颜色 -->
border-radius:10px 10px 10px 10px<!-- 圆角；左上，右上，右下，左下-->
cursor:pointer <!-- 鼠标经过时鼠标变成小手 -->
}
方法/步骤HTML结构
该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮
CSS样式
以下是该css3点击按钮特效的通用CSS样式：
插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：
上面的CSS代码可以生成如下图的动画效果：
在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。
在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。
