CSS3技巧：利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘，嗯，有这样想过，如今css3技术这么先进再用背景做平铺是不是已经out了，那么今天给大家介绍一个用css3径向渐变做的优惠券。

CSS3 径向渐变和线性渐变是很相似的，首先来看其语法：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

除了你已经在线性渐变中看到的起始位置，方向和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。 颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。

做优惠券最主要的代码如下，就是这三句

background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;

不多解释直接上代码



查看效果

CSS代码

这是公共样式
.stamp {width: 387px;height: 140px;padding: 0 10px;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;}
.stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}
.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);}
.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;}

HTML代码

<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>

 

查看效果

PS：用这个方式还可以做邮票，不信你试试

方法二：

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

我们在读纸质书的时候，经常用笔划波浪线来突出重点内容，以强化视觉感受。

而在Web页面上，没有CSS3之前，我们只能用背景图片来实现类似功能，这当然不是个高效的方式，且难于维护和调整。

比如你只是想调整下颜色、线条大小和倾斜的角度，你都得打开作图软件来折腾一下。

现在我们可以使用CSS3伪元素及其背景渐变（gradient）来实现这一有趣而实用的效果。

波浪线特征
我们观察下波浪线，有这么2个基本几何特征：

1. 波折线是重复的，可以被分解为若干相连的“角”形状

2. 这些“角”的连接点处是平滑过渡的，不能出现毛刺，所以需要对顶点处做平滑处理

对于（1），我们可以首先创建一个尖角形状（由一撇一捺2条短直线组成），然后使用x方向的repeat来重复。

对于（2），我们可以使用渐变色，模拟人手划线时，在转弯处力道减弱，我们在尖角相交处使用相对淡色，构造出圆角的视觉感受。

CSS3线性渐变
我们注意到每个“角”都有2条边，如果以默认渐变轴（从上往下的一条垂直线）来看，左边的呈现45°倾斜，而右边的呈现315°倾斜。

那么如何创建一个45°的倾斜线呢？我们很容易想到用rotate变换，但是rotate是作用于整个元素上的，在这里并不适用。

我们换个思路，CSS3中的线性渐变（linear-gradient）可以完成上述要求，线性渐变的核心是渐变轴、起点终点和颜色值分布。

通过设置渐变轴的角度为45°，我们可以得到倾斜的特性，然后我们再把渐变宽度缩窄到一个线条的大小，具体代码如下：

[css] view
plain copy

 





div {  

  background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);   

  background-size: 20px 20px;  

  background-repeat: no-repeat;  

}  

上面linear-gradient方法中的第一个参数是渐变轴角度，渐变将沿渐变轴开展，也就是渐变线的角度为45°。

后面的参数表示从0到45%的长度上为透明，45%到55%为红色渐变，55%到100%为透明。

也就是只有元素背景长度的10%出现渐变色（且是两边对称），第二行代码把背景的宽度设置为20px，那么渐变线的实际宽度为10px*10%=2px。

这样我们就得到了一根短折线，具备45°倾斜，且带渐变。

类似的，我们可以得到一根315°的渐变短折线：

[css] view
plain copy

 





div {  

  background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);   

  background-size: 20px 20px;  

  background-repeat: no-repeat;  

}  

但是现在我们得到的是2条交叉的线条，形成一个“X”形状，这并不是我们想要的。

一个简单的技巧就是设置元素的高度为1/2，就得到了一个“V”形。

然后，我们把background-repeat设置为repeat-x，就得到了波浪线形状。

CSS3 :before伪元素
我们还剩最后一步，我们需要把波浪线形状添加到文本下面，只要把上面的div元素改成对应文本的:before伪元素即可。

我们还可以设置不同的渐变颜色用以标注不同的文本。

你可以自己在线试试：http://wow.techbrood.com/fiddle/5868