css3制作优惠券
- <div class="demo-container demo"><style>
- .demo{width:410px;}
- .stamp *{padding: 0;margin: 0;list-style:none;font-family:"Microsoft YaHei",'Source Code Pro', Menlo, Consolas, Monaco, monospace;}
- .stamp {
- width: 387px;
- height: 140px;
- padding: 0 10px;
- margin-bottom: 50px;
- position: relative;
- overflow: hidden;
- }
- .stamp:before {
- content: '';
- position: absolute;
- top:0;
- bottom:0;
- left:10px;
- right:10px;
- z-index: -1;
- }
- .stamp:after {
- content: '';
- position: absolute;
- left: 10px;
- top: 10px;
- right: 10px;
- bottom: 10px;
- box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
- z-index: -2;
- }
- .stamp i{
- position: absolute;
- left: 20%;
- top: 45px;
- height: 190px;
- width: 390px;
- background-color: rgba(255,255,255,.15);
- transform: rotate(-30deg);
- }
- .stamp .par{
- float: left;
- padding: 16px 15px;
- width: 220px;
- border-right:2px dashed rgba(255,255,255,.3);
- text-align: left;
- }
- .stamp .par p{color:#fff;font-size: 16px;
- line-height: 21px;}
- .stamp .par span{
- font-size: 50px;
- color:#fff;
- margin-right: 5px;
- line-height: 65px;
- }
- .stamp .par .sign{font-size: 34px;}
- .stamp .par sub{position: relative;top:-5px;
- color:rgba(255,255,255,.8);
- }
- .stamp .copy{
- display: inline-block;
- padding:21px 14px;
- width:100px;
- vertical-align: text-bottom;
- font-size: 30px;
- color:rgb(255,255,255);
- text-align: center;
- line-height: initial;
- }
- .stamp .copy p{font-size: 16px;margin-top: 15px;}
- .stamp01{
- background: #F39B00;
- background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);
- background-size: 15px 15px;
- background-position: 9px 3px;
- }
- .stamp01:before{
- background-color:#F39B00;
- }
- .stamp02{
- background: #D24161;
- background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
- background-size: 15px 15px;
- background-position: 9px 3px;
- }
- .stamp02:before{
- background-color:#D24161;
- }
- .stamp03{
- background: #7EAB1E;
- background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
- background-size: 15px 15px;
- background-position: 9px 3px;
- }
- .stamp03:before{
- background-color:#7EAB1E;
- }
- .stamp03 .copy{
- padding: 10px 6px 10px 12px;
- font-size: 24px;
- }
- .stamp03 .copy p{
- font-size: 14px;
- margin-top: 5px;
- margin-bottom: 8px;
- }
- .stamp03 .copy a{
- background-color:#fff;
- color:#333;
- font-size: 14px;
- text-decoration:none;
- padding:5px 10px;
- border-radius:3px;
- display: block;
- }
- .stamp04{
- width: 390px;
- background: #50ADD3;
- background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);
- background-size: 12px 8px;
- background-position: -5px 10px;
- }
- .stamp04:before{
- background-color:#50ADD3;
- left: 5px;
- right: 5px;
- }
- .stamp04 .copy{
- padding: 10px 6px 10px 12px;
- font-size: 24px;
- }
- .stamp04 .copy p{
- font-size: 14px;
- margin-top: 5px;
- margin-bottom: 8px;
- }
- .stamp04 .copy a{
- background-color:#fff;
- color:#333;
- font-size: 14px;
- text-decoration:none;
- padding:5px 10px;
- border-radius:3px;
- display: block;
- }
- </style>
- <div class="demo">
- <div class="stamp stamp01">
- <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
- <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
- <i></i>
- </div>
- <div class="stamp stamp02">
- <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
- <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
- <i></i>
- </div>
- <div class="stamp stamp03">
- <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
- <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
- <i></i>
- </div>
- <div class="stamp stamp04">
- <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
- <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
- <i></i>
- </div>
- </div></div>
css3制作优惠券的更多相关文章
- css3 绘制优惠券
今天偶然发现了一个css3制作动画的地方,发现css3的径向渐变好难理解,幸亏有这里的大神介绍http://www.daqianduan.com/5989.html,这是优惠券的介绍 还有这个http ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
随机推荐
- Chp4: Trees and Graphs
1.Type of Tree 1. Binary Tree: a binary tree is a tree in which each node has at most two child node ...
- zoj 2777 Visible Lattice Points(欧拉函数,基础)
题目 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #include<algo ...
- ubuntu下安装spark1.4.0
构建在hadoop2.6.0之上的 1.在官网下载spark-1.4.0-bin-hadoop2.6.tgz 2.解压到你想要放的文件夹里,tar zxvf spark-1.4.0-bin-hadoo ...
- cogs 自己出的题目 题解报告
第一题很简单嘛,就是裸的动态树分治嘛 对于每一层的重心维护子树路径的信息和子树到上一层重心的点的信息 空间复杂度O(nlogn) 对于每一层我们按dis排序,之后记录军队数量的前缀和 查询的时候我们只 ...
- 李洪强iOS开发之OC语言@property @synthesize和id
OC语言@property @synthesize和id 一.@property @synthesize关键字 注意:这两个关键字是编译器特性,让xcode可以自动生成getter和setter的声明 ...
- lintcode :Remove Duplicates from Sorted Array II 删除排序数组中的重复数字 II
题目: 删除排序数组中的重复数字 II 跟进“删除重复数字”: 如果可以允许出现两次重复将如何处理? 样例 给出数组A =[1,1,1,2,2,3],你的函数应该返回长度5,此时A=[1,1,2,2, ...
- Linux系统与性能监控
原文地址:http://kerrigan.sinaapp.com/post-7.html Linux System and Performance Monitoring http://www.hous ...
- 254. Factor Combinations
题目: Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a ...
- C# 使用AutoResetEvent进行线程同步
AutoResetEvent 允许线程通过发信号互相通信. 通常,当线程需要独占访问资源时使用该类. 线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号. 如果 AutoRe ...
- Java泛型 通配符? extends与super
Java 泛型 关键字说明 ? 通配符类型 <? extends T> 表示类型的上界,表示参数化类型的可能是T 或是 T的子类 <? super T> 表示类型下界(Java ...