CSS3制作Freebie标签
<!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标签的更多相关文章
- CSS3制作日历
目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...
- CSS3制作
目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- CSS3制作各种形状图像（转）
CSS3制作各种形状图像 浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读 圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- 纯CSS3制作的“Ribbons”效果
在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
随机推荐
- 手机应用：非功能需求 Check List
服务状态防止并发 网络保持:无线网络,GPRS 网络连接:https,手机助手代理 电量 屏幕保持防止休眠 下载重试机制 定时检查XML 限速下载,线程休眠 下载出错反馈机制 消息广播 状态栏通知 进 ...
- swing入门教程
(转自http://terrificwanjun.bokee.com/) UI 组件简介 在开始学习 Swing 之前,必须回答针对真正初学者的一个问题:什么是 UI?初学者的答案是“用户界面”.但是 ...
- 乘法器的Verilog HDL实现
原文链接:http://www.cnblogs.com/shengansong/archive/2011/05/23/2054401.html 1. 串行乘法器 两个N位二进制数x.y的乘积用简单的 ...
- 用java解析在OpenStreetMap上下载的地图数据
采用dom4j解析下载的xml文件,java程序如下: package gao.map.preprocess; import java.io.BufferedWriter; import java.i ...
- Informatica 常用组件Filter之二 过滤条件
过滤条件可以使用转换语言输入.过滤条件是返回 TRUE 或 FALSE 的表达式.例如,如果您要过滤出员工薪水低于 $30,000 的行,可输入以下条件: SALARY > 30000 可以使用 ...
- 求两个数中的较大值max(a,b)。(不用if，>)
题目:求两个数的较大值,不能使用if.>. 1.不使用if.>,还要比较大小,貌似就只能使用条件表达式: x=<表达式1>?<表达式2>:<表达式3>; ...
- C语言 strftime 格式化显示日期时间 时间戳
C/C++程序中需要程序显示当前时间,可以使用标准函数strftime. 函数原型:size_t strftime (char* ptr, size_t maxsize, const char* fo ...
- Swap Nodes in Pairs leetcode java
题目: Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1-> ...
- Medication Reconciliation Overview
http://www.hcsinc.net/HCS-Medication-Reconciliation/med-rec-overview.html At HCS, we've worked with ...
- C语言学习笔记：14_内部函数和外部函数
/* * 14_内部函数和外部函数.c * * Created on: 2015年7月5日 * Author: zhong */ #include <stdio.h> #include & ...