<!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. 兼容的动态加载JS【原】

    兼容的动态加载JS 屌丝就是悲剧,五一还得宅家里写程序专研技术. 说起动态加载JS,搞web的肯定不陌生,著名的YUI库就有强大的模块化的动态加载JS机制.在代码量不断庞大的今天,动态加载JS作用还是 ...

  2. Object类型转换为long或者Long

    1.转换为long Object o = new Object();long l = Long.valueOf(String.valueOf(o)).longValue(); 2.转换为Long Ob ...

  3. Python 3.6学习笔记（一）

    知识是一座宝库,而实践就是开启这座宝库的钥匙. ----Thomas Fuller 开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute ...

  4. vue设置多入口教程

    官方脚手架搭建vue项目 在src 目录下复制app内容创建test.vue,demo.vue, main.js复制main.js内容demo.js,test.js,修改一下内容 在根目录下创建tes ...

  5. DataTable怎么判断一列是否为主键?

    在普通情况下,我们使用SqlDataAdapter来Fill填充DataTable,如果使用下列代码我们是不能拿到主键列的: dataadapter.Fill(Table); DataColumn[] ...

  6. Web页面切图和CSS注意事项

    一.Asp.net中的线程池设置 在Asp.net的服务处理中,每当服务器收到一个请求,HttpRuntime将从HttpApplication池中获取一个HttpApplication对象处理此请求 ...

  7. 有关于腾讯地图服务端IP定位接口的获取当前城市的处理

    接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...

  8. 九度 题目1421：Abor

    转载声明本文地址 http://blog.csdn.net/yangnanhai93/article/details/40563285 题目链接:http://ac.jobdu.com/problem ...

  9. typescript 的一种引入文件的方式 Triple-Slash Directives

    ---恢复内容开始--- /// reference 原文: https://www.typescriptlang.org/docs/handbook/triple-slash-directives. ...

  10. simple-libfm-example-part1

    原文:https://thierrysilbermann.wordpress.com/2015/02/11/simple-libfm-example-part1/ I often get email ...