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实现进度条和订单进度条>,但是呢, ...
随机推荐
- 打印后台程序服务没有启动，每次打开Powerdesigner都会要我安装打印机
原因: 不光这个,就是word也需要你有个打印机.随便安一个就可以了.一般系统自带个Microsoft Office Document Image Writer的还报打印机,要是你有这个打印机的话.查 ...
- DELIMITER关键词作用 替换结束符号
注意:“DELIMITER //”语句的作用是将MYSQL的结束符设置为//,因为MYSQL默认的语句结束符为分号;,为了避免与存储过程 中SQL语句结束符相冲突,需要使用DELIMITER 改变存储 ...
- Android之Bean属性通知类
调用: import java.beans.PropertyChangeEvent; import java.beans.PropertyChangeListener; import android. ...
- Surrounded Regions leetcode java
题目: Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is capt ...
- javascript简单性能问题及学习笔记
最近在看一本书:<高性能javaScript>,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该 ...
- Android GUI之View布局
在清楚了View绘制机制中的第一步测量之后,我们继续来了解分析View绘制的第二个过程,那就是布局定位.继续跟踪分析源码,根据之前的流程分析我们知道View的绘制是从RootViewImpl的perf ...
- IOS开发之新浪微博OAuth2
说明:微博开放接口的调用,如发微博.关注等,都是需要获取用户身份认证的.目前微博开放平台用户身份鉴权主要采用的是OAuth2.0.为了方便开发者开发.测试自己的应用. OAuth2.0较1.0相比,整 ...
- kafka基本原理概述——patition与replication分配
kafka一直在大数据中承受着数据的压力也扮演着对数据维护转换的角色,下面重点介绍kafka大致组成及其partition副本的分配原则: 文章参考:http://www.linkedkeeper.c ...
- 如何使用Neofetch个性化显示Linux系统信息
可用于查看和显示 Linux 系统信息的开源工具和脚本实在太多,Neofetch 也是其中之一,Neofetch 可以以更全面的方式来显示输出详实的 Linux 系统信息,简单地来说,如果你想查看 L ...
- java线上服务问题排查
1.业务日志相关 假设系统出现异常或者业务有异常,首先想到的都是查看业务日志 查看日志工具: less 或者more grep tail -f filename 查看实时的最新内容 ps:切忌vim直 ...