<!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制作文字特效

    今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...

  2. 用html和css制作日历,CSS3制作日历

    前面使用了CSS3制作过Progress Bars.分页导航.Login栏.Search Box等等.今天一起和大家使用css3来制作一个日历效果,希望大家喜欢. 目标 今天我们的目标是制作如下面DE ...

  3. html锯齿边框,css3制作邮票（锯齿边框）-css3制作邮票（锯齿边框）-HTML5+CSS3-编玩编学- 注重积累的过程 快速锁定问题解决问题 写博客，在积累源码,持续更新技术博客,加分项...

    css3制作邮票(锯齿边框) html: css: body,h1,h2,h3,h4,ul,li,div,a,p{ margin: 0; padding: 0; font-family: arial; ...

  4. 用CSS3制作一个风车

    开发工具与关键技术:用CSS3制作一个风车 作者:李波 首先我的风车html如下: Css部分:需要给四个叶子的设置其对应的样式:首先是第一页的叶子如下图(这里展示第一个叶子的样式),为了突出效果我将 ...

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

    在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的"Ribbons"各部位的示意图,但每一个"Ribbons"并不会都使用上图示意的各个部分 ...

  6. CSS3 制作动态相册

    CSS3 制作动态相册 3D万花筒   思路      1) 创建站点       在站点里面再新建html文档            再新建css文档            再新建图片文件夹     ...

  7. 纯CSS3制作的圆角效果按钮菜单

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  8. 用CSS3制作很特别的波浪形菜单

    用CSS3制作很特别的波浪形菜单 原文:用CSS3制作很特别的波浪形菜单 网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...

  9. css3制作左右拉伸动画菜单

    微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...

最新文章

  1. 图像分割--PixelNet: Representation of the pixels, by the pixels, and for the pixels
  2. 如何在Linux上找到包含特定文本的所有文件？
  3. Unity Shader——Writing Surface Shaders(2)——Custom Lighting models in Surface Shaders
  4. 业务安全通用解决方案——WAF数据风控
  5. Mac平台上的几款串口工具
  6. 国家计算机科学进展,计算机科学技术学院部署科研工作推进及国家自然科学基金申报工作...
  7. .net控件FreeTextBox使用方法
  8. 消除ie上的：为了有利于保护安全性，IE已限制此网页运行可以访问计算机的脚本或 ActiveX 控件...
  9. 这个黑科技耳机方便又时尚，听歌也不怕坐过
  10. AZURE-百万像素定焦镜头
  11. android 启动界面修改工具下载,安卓开机画面更改软件
  12. 【第一章：绪论】静态时序分析圣经翻译计划
  13. Windows应急响应练习-勒索病毒篇1
  14. linux服务器修改ftp默认21端口方法
  15. Arduino最简单的例程--使用面包板点灯
  16. iOS TestFlight Beta版本测试
  17. 【论文阅读】3D-CVF: Generating Joint Camera and LiDAR Features Using Cross-View Spatial Feature Fusion for
  18. GitLab设置受保护的分支
  19. 【深度学习】BioBERT文章翻译及个人感悟
  20. 【C++ Primer Plus】第4章 复合类型

热门文章

  1. python中的类和对象2
  2. Mac Pro下终端配置Zsh(iterm2 3.3.0 + oh-my-zsh + solarized配色)
  3. android 记录触屏坐标,android 屏幕坐标总结
  4. zxing 二维码、带logo二维码生成
  5. krpano plugin interface
  6. 《计算机网络》以太网
  7. QVariant方法功能（QT5.12）
  8. SQL 创建、更新、删除表、重命表名
  9. 酷狗音乐能拉进计算机里面吗,手机上的酷狗音乐怎么传到电脑上|苹果手机酷狗音乐怎么传到电脑上|酷狗音乐电脑和手机怎么同步...
  10. 互联网巨头前沿科技产品一览