Make a coupon with CSS3 radial gradient

This article mainly introduces the use of CSS3 radial gradient to do a coupon example of the relevant information, the content is very good, and now share to everyone, but also for everyone to do a reference.

On many shopping sites can see coupons, vouchers, what is the coupon, but the basic picture is directly put up, then you have not thought of CSS to do one, anyway, I think so. So what do you do, cut the picture to do the background tile edge, well, have this thought, now CSS3 technology so advanced and then use the background tile is not already out, then today to introduce a CSS3 radial gradient do coupons.

CSS3 radial and linear gradients are very similar, and first look at their syntax:

-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>]*);

In addition to the starting position, direction and color that you have seen in the linear gradient, the radial gradient allows you to specify the shape of the gradient (round or oval) and the size (nearest, nearest, farthest, most far corner, contained or overwritten (Closest-side, Closest-corner, Farthest-side, Farthest-corner, contain or cover). Color stops: Just like with a linear gradient, you should define the starting and ending colors of the gradient along the gradient line.

The main code to do the coupon is as follows, this is the three sentences

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

Not much to explain directly on the code

Discount Coupon

CSS Code

This is a public style

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

<p class = "stamp stamp01">
<p class = "par"> <p> XXXXXX discount store </ p> <sub class = "sign"> ￥ </ sub> <span> 50.00 </ span> <sub> coupon </ sub> <p > Orders over 100.00 Yuan </ p> </ p>
<p class = "copy"> Voucher <p> 2015-08-13 <br> 2016-08-13 </ p> </ p>
<i> </ i>
</ p>
<p class = "stamp stamp02">
<p class = "par"> <p> XXXXXX discount store </ p> <sub class = "sign"> ￥ </ sub> <span> 50.00 </ span> <sub> coupon </ sub> <p > Orders over 100.00 Yuan </ p> </ p>
<p class = "copy"> Voucher <p> 2015-08-13 <br> 2016-08-13 </ p> </ p>
<i> </ i>
</ p>
<p class = "stamp stamp03">
<p class = "par"> <p> XXXXXX discount store </ p> <sub class = "sign"> ￥ </ sub> <span> 50.00 </ span> <sub> coupon </ sub> <p > Orders over 100.00 Yuan </ p> </ p>
<p class = "copy"> Voucher <p> 2015-08-13 <br> 2016-08-13 </ p> <a href="#"> Use now </a> </ p>
<i> </ i>
</ p>
<p class = "stamp stamp04">
<p class = "par"> <p> XXXXXX discount store </ p> <sub class = "sign"> ￥ </ sub> <span> 50.00 </ span> <sub> coupon </ sub> <p > Orders over 100.00 Yuan </ p> </ p>
<p class = "copy"> Voucher <p> 2015-08-13 <br> 2016-08-13 </ p> <a href="#"> Use now </a> </ p>
<i> </ i>
</ p> 

PS: In this way can also make stamps, do not believe you try

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!