CSS3教程:用颜色线性渐变做一张优惠券

通过上两篇基础内容的学习,相信大家已经掌握了CSS3的颜色渐变使用以及浏览器的兼容性。本篇笔记波波将通过实例来分享网站优惠券的制作方法。

效果如图所示:

用颜色线性渐变做一张优惠券

核心样式代码:

  1. background: radial-gradient(transparent 0, transparent 5px#F39B00 5px);
  2. background-size15px 15px;
  3. background-position9px 3px;

以下是完整代码:

CSS部分:

  1. .stamp {width387px;height140px;padding: 0 10px;positionrelative;overflowhidden;}
  2. .stamp:before {content'';positionabsolute;top:0;bottombottom:0;left:10px;rightright:10px;z-index: -1;}
  3. .stamp:after {content'';positionabsolute;left10px;top10px;rightright10px;bottombottom10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
  4. .stamp i{positionabsolute;left: 20%;top45px;height190px;width390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
  5. .stamp .par{floatleft;padding16px 15px;width220px;border-right:2px dashed rgba(255,255,255,.3);text-alignleft;}
  6. .stamp .par p{color:#fff;}
  7. .stamp .par span{font-size50px;color:#fff;margin-right5px;}
  8. .stamp .par .sign{font-size34px;}
  9. .stamp .par sub{positionrelative;top:-5px;color:rgba(255,255,255,.8);}
  10. .stamp .copy{displayinline-block;padding:21px 14px;width:100px;vertical-aligntext-bottom;font-size30px;color:rgb(255,255,255);}
  11. .stamp .copy p{font-size16px;margin-top15px;}
  12. .stamp01{background#F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px#F39B00 5px);background-size15px 15px;background-position9px 3px;}
  13. .stamp01:before{background-color:#F39B00;}
  14. .stamp02{background#D24161;background: radial-gradient(transparent 0, transparent 5px#D24161 5px);background-size15px 15px;background-position9px 3px;}
  15. .stamp02:before{background-color:#D24161;}
  16. .stamp03{background#7EAB1E;background: radial-gradient(transparent 0, transparent 5px#7EAB1E 5px);background-size15px 15px;background-position9px 3px;}
  17. .stamp03:before{background-color:#7EAB1E;}
  18. .stamp03 .copy{padding10px 6px 10px 12px;font-size24px;}
  19. .stamp03 .copy p{font-size14px;margin-top5px;margin-bottom8px;}
  20. .stamp03 .copy a{background-color:#fff;color:#333;font-size14px;text-decoration:none;padding:5px 10px;border-radius:3px;displayblock;}
  21. .stamp04{width390px;background#50ADD3;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px#50ADD3 4px);background-size12px 8px;background-position: -5px 10px;}
  22. .stamp04:before{background-color:#50ADD3;left5px;rightright5px;}
  23. .stamp04 .copy{padding10px 6px 10px 12px;font-size24px;}
  24. .stamp04 .copy p{font-size14px;margin-top5px;margin-bottom8px;}
  25. .stamp04 .copy a{background-color:#fff;color:#333;font-size14px;text-decoration:none;padding:5px 10px;border-radius:3px;displayblock;}

HTML部分代码:

  1. <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>
  2. <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>
  3. <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>
  4. <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>

相信你看到这,一定觉得,这么长串的代码,我怎么写出来,看着都晕。如果是简单的渐变,可以用less的函数来生成,只需要提供开始颜色和停止颜色。如果是按钮,则有专门的网站,可视化生成。

 

波波
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!