<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>CSS3制作Freebie标签</title>

<style type="text/css">

body{

background-color: #f2f2f2;

background-size:20px 20px,20px 20px,6px 6px,6px 6px;

background-position:-2px -2px, -2px -2px,0 0, 3px 3px;

background-image: -webkit-linear-gradient(white 2px, transparent 2px),

-webkit-linear-gradient(0, white 2px, transparent 2px),

-webkit-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),

-webkit-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);

background-image: -moz-linear-gradient(white 2px, transparent 2px), 

                  -moz-linear-gradient(0deg, white 2px, transparent 2px),

                  -moz-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),

                  -moz-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);

background-image: -ms-linear-gradient(white 2px, transparent 2px),

                  -ms-linear-gradient(0, white 2px, transparent 2px),

                  -ms-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),

                  -ms-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);

background-image: -o-linear-gradient(white 2px, transparent 2px),

                  -o-linear-gradient(0, white 2px, transparent 2px),

                  -o-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),

                  -o-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);                  

background-image: linear-gradient(white 2px, transparent 2px),

                  linear-gradient(0, white 2px, transparent 2px),

                  linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),

                  linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);

}

.box ul{

margin-top: 100px;

letter-spacing: -4px;

word-spacing: -4px;

font-size: 0;

height:75px;

text-align: center;

box-shadow:0 -2px 3px rgba(0,0,0,.05),0 2px 3px rgba(0,0,0,.05);

background:#fff; 

}

.box li{

letter-spacing: normal;

word-spacing: normal;

display:inline-block;

*display: inline;

zoom:1;

position:relative;

top:-5px;

width:39px;

height:48px;

margin-right:40px;

border-top:1px solid #66991f;

border-left:1px solid #66991f;

border-right:1px solid #66991f;

overflow: hidden;

background-color: #79b023;

background-size:3px 3px;

background-position: 0 0, 1px 1px;

background-image: -webkit-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e), 

                  -webkit-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);

background-image: -moz-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),

                  -moz-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);

background-image: -ms-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),

                  -ms-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);

background-image: -o-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),

                  -o-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);                  

background-image: linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),

                  linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);

}

.box li:last-child{ margin-right: 0;}

.box li:after,.box li:before{

position:absolute;

display:block;

}

.box li:before{

top:5px;

left: 5px;

content: "";

width: 28px;

height: 0;

line-height: 30px;

color:rgba(69,124,12,.5);

border-top: 1px dashed #5d8c1c;

border-bottom: 1px dashed #b4d969;

font-size: 18px;

font-family: 'icomoon';

font-style: normal;

speak: none;

font-weight: normal;

-webkit-font-smoothing: antialiased;

}

.box li:after{ 

content:"";

left:-1px;

top:38px;

width:38px;

height:35px;

box-shadow:1px 0 3px rgba(0,0,0,.3),0 -1px 3px rgba(0,0,0,.3);

background:#fff;

-webkit-transform:rotate(-45deg) skew(18deg,20deg);

-moz-transform:rotate(-45deg) skew(18deg,20deg);

-o-transform:rotate(-45deg) skew(18deg,20deg);

-ms-transform:rotate(-45deg) skew(18deg,20deg);

transform:rotate(-45deg) skew(18deg,20deg);

}

.box li:nth-child(1):before{

content: "\21";

}

.box li:nth-child(2):before{

content: "\25";

}

.box li:nth-child(3):before{

content: "\24";

}

.box li:nth-child(4):before{

content: "\22";

}

.box li:nth-child(5):before{

content: "\26";

}

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

  url('fonts/icomoon.svg#icomoon') format('svg'),

  url('fonts/icomoon.woff') format('woff'),

  url('fonts/icomoon.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

  </style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="page">

  <header id="header">

    <hgrounp class="blank">

      <h1>CSS3制作Freebie标签</h1>

    </hgrounp>

  </header>

  <section class="demo">

    <div class="box">

      <ul class="nostyle">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ul>

    </div>

  </section>

</div>

</body>

</html>

CSS3制作Freebie标签的更多相关文章

  1. CSS3制作日历

    目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...

  2. CSS3制作

    目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...

  3. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  4. CSS3制作各种形状图像（转）

    CSS3制作各种形状图像 浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读 圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...

  5. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  6. 纯CSS3制作的“Ribbons”效果

    在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...

  7. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  8. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. gflags摘记

    projcet url: https://github.com/schuhschuh/gflags usage: commandline flags processing DEFINE: Defini ...

  2. Android图片加载框架最全解析（二），从源码的角度理解Glide的执行流程

    在本系列的上一篇文章中,我们学习了Glide的基本用法,体验了这个图片加载框架的强大功能,以及它非常简便的API.还没有看过上一篇文章的朋友,建议先去阅读 Android图片加载框架最全解析(一),G ...

  3. 学习笔记：A*算法

    简易地图 如图所示简易地图, 其中绿色方块的是起点 (用 A 表示), 中间蓝色的是障碍物, 红色的方块 (用 B 表示) 是目的地. 为了可以用一个二维数组来表示地图, 我们将地图划分成一个个的小方 ...

  4. 【BZOJ】【1923】【Sdoi2010】外星千足虫

    高斯消元解Xor方程组 ZYF Orz 这题……不作死就不会死T^T,用bitset确实比较快,而且可以从string直接转成bitset(构造函数). 但问题是我把转过来以后的顺序搞反了……原本以为 ...

  5. 2、COCOS2D-X内存管理机制

    在C++中.动态内存分配是一把双刃剑,一方面,直接訪问内存地址提高了应用程序的性能,与使用内存的灵活性.还有一方面.因为程序没有正确地分配与释放造成的比如野指针,反复释放,内存泄漏等问题又严重影响着应 ...

  6. @Java中使用Jedis操作Redis之一

    依赖的jar包:jedis <dependency> <groupId>redis.clients</groupId> <artifactId>jedi ...

  7. OpenCV学习(37) 人脸识别(2)

          在前面一篇教程中,我们学习了OpenCV中基于特征脸的人脸识别的代码实现,我们通过代码 Ptr<FaceRecognizer> model = createEigenFaceR ...

  8. Cisco KVM Console无法打开

    前阵子手贱, 每次弹出的Java的update的对话框我都是直接关闭的, 那天实在是不忍再受骚扰, 升级到了Java 8. 结果Cisco的KVM就死活打不开了, 报错如下: Exception: c ...

  9. C#匿名方法与Delegate类型转换错误

    问题描述 C#2.0出现了匿名方法, 这在一定程度上节省了我们维护代码上下文的精力, 也不需要思考为某个方法取什么名字比较合适. 在FCL的一些方法中要求传入一个Delegate类型的参数, 比如Co ...

  10. （转）NGUI系列教程七（序列帧动画UITexture 和 UIsprit）

    NGUI系列教程七(序列帧动画)   今天我给大家讲一下如何使用NGUI做序列帧动画.本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画.废话不说了,下面开始.还 ...