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实现进度条和订单进度条>,但是呢, ...
随机推荐
- ExtJS GridPanel的ColumnModel 动态加载
var colM = "company,id,flyline"; var colMArr = colM.split(","); var colLength = ...
- vc中nmake.exe cl.exe 的使用
首先简单介绍一下程序是如何编译链接的.程序写好之后,我们进行编译和链接来产生可执行程序.这时候,编译器为了完成编译和链接,需要知道很多信 息.比如要编译的文件是哪一个,使用哪些编译选项进行编译,编译好 ...
- TF卡和SD卡的区别
小型存储设备凭借低廉的价格.多样化的品种.实用等特性大量充斥在大家身边,比如智能手机手机上.数码照相机上.游戏机上(一般是掌机)等都小型电子设备都频繁的使用到这种统称为SD的产品,比如TF卡和SD卡( ...
- 在Ubuntu 12.04 桌面上设置启动器（快捷方式）
在Ubuntu 12.04 桌面上设置启动器(快捷方式)过程讲解: 如下图所示,Eclipse 和 SQLDeveloper 都可以直接双击打开,这些应用程序的启动器都在 /usr/share/app ...
- AngularJS driective 封装 自动滚动插件
1.ui-smooth-scroll.js文件内容 angular.module('app') .directive('uiSmoothScroll', ['$location', '$anchorS ...
- document.execCommand("BackgroundImageCache",false,true)解决ie6下的背景图片缓存问题
E6下的背景图片每次使用都会重新发送请求(not 本地),连一个hover效果时候同样的背景图片仅仅位置不同而已,ie6都会再次发送请求,这个令人崩溃的事情需要解决掉:对于ie来说,filter:ex ...
- 容器学习（一）：动手模拟spring的IoC
介绍 学习经典框架的实现原理以及设计模式在事实上际中的运用,是很有必要的,能够让我们更好进行面向对象. 本篇文章就来模拟Spring的IOC功能.明确原理后,能够更好的使用它,进而为进行面向对象提供一 ...
- 【java】jvm查看当前虚拟机堆大小限制
#############################################################jinfo -flag MaxHeapSize 6461#linux: jav ...
- 【K8S】K8S-网络模型、POD/RC/SVC YAML 语法官方文档
K8S-网络模型.POD/RC/SVC YAML 语法官方文档 Kubernetes - Production-Grade Container Orchestration kubernetes/kub ...
- 机器学习的开源平台 TensorFlow
一. google第二代人工智能机器学习开源工具. http://www.tensorfly.cn/ 二. 知乎上关于机器学习的资料问答 https://www.zhihu.com/question/ ...