css3制作优惠券

  1. <div class="demo-container demo"><style>  
  2. .demo{width:410px;}  
  3. .stamp *{padding: 0;margin: 0;list-style:none;font-family:"Microsoft YaHei",'Source Code Pro', Menlo, Consolas, Monaco, monospace;}  
  4.   
  5. .stamp {  
  6. width: 387px;  
  7. height: 140px;  
  8. padding: 0 10px;  
  9. margin-bottom: 50px;  
  10.   
  11. position: relative;  
  12. overflow: hidden;  
  13.   
  14.   
  15. }  
  16. .stamp:before {  
  17. content: '';  
  18. position: absolute;  
  19. top:0;  
  20. bottom:0;  
  21. left:10px;  
  22. right:10px;  
  23.   
  24. z-index: -1;  
  25. }  
  26. .stamp:after {  
  27. content: '';  
  28. position: absolute;  
  29. left: 10px;   
  30. top: 10px;   
  31. right: 10px;   
  32. bottom: 10px;  
  33. box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);  
  34. z-index: -2;  
  35. }  
  36.   
  37. .stamp i{  
  38. position: absolute;  
  39. left: 20%;  
  40. top: 45px;  
  41. height: 190px;  
  42. width: 390px;  
  43. background-color: rgba(255,255,255,.15);  
  44. transform: rotate(-30deg);  
  45. }  
  46. .stamp .par{  
  47. float: left;  
  48. padding: 16px 15px;  
  49. width: 220px;  
  50. border-right:2px dashed rgba(255,255,255,.3);  
  51. text-align: left;  
  52. }  
  53. .stamp .par p{color:#fff;font-size: 16px;  
  54.     line-height: 21px;}  
  55. .stamp .par span{  
  56. font-size: 50px;  
  57. color:#fff;  
  58. margin-right: 5px;  
  59. line-height: 65px;  
  60. }  
  61. .stamp .par .sign{font-size: 34px;}  
  62. .stamp .par sub{position: relative;top:-5px;  
  63. color:rgba(255,255,255,.8);  
  64. }  
  65. .stamp .copy{  
  66. display: inline-block;  
  67. padding:21px 14px;  
  68. width:100px;  
  69. vertical-align: text-bottom;  
  70. font-size: 30px;  
  71. color:rgb(255,255,255);  
  72. text-align: center;  
  73. line-height: initial;  
  74. }  
  75. .stamp .copy p{font-size: 16px;margin-top: 15px;}  
  76. .stamp01{  
  77. background: #F39B00;  
  78. background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);  
  79. background-size: 15px 15px;  
  80. background-position: 9px 3px;  
  81. }  
  82. .stamp01:before{  
  83. background-color:#F39B00;  
  84. }  
  85. .stamp02{  
  86. background: #D24161;  
  87. background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);  
  88. background-size: 15px 15px;  
  89. background-position: 9px 3px;  
  90. }  
  91. .stamp02:before{  
  92. background-color:#D24161;  
  93. }  
  94. .stamp03{  
  95. background: #7EAB1E;  
  96. background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);  
  97. background-size: 15px 15px;  
  98. background-position: 9px 3px;  
  99. }  
  100. .stamp03:before{  
  101. background-color:#7EAB1E;  
  102. }  
  103. .stamp03 .copy{  
  104.     padding: 10px 6px 10px 12px;  
  105.     font-size: 24px;  
  106. }  
  107. .stamp03 .copy p{  
  108.     font-size: 14px;  
  109.     margin-top: 5px;  
  110.     margin-bottom: 8px;  
  111. }  
  112. .stamp03 .copy a{  
  113.     background-color:#fff;  
  114.     color:#333;  
  115.     font-size: 14px;  
  116.     text-decoration:none;  
  117.     padding:5px 10px;  
  118.     border-radius:3px;  
  119.     display: block;  
  120. }  
  121.   
  122.   
  123. .stamp04{  
  124.     width: 390px;  
  125.     background: #50ADD3;  
  126.     background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);  
  127.     background-size: 12px 8px;  
  128.     background-position: -5px 10px;  
  129. }  
  130. .stamp04:before{  
  131.     background-color:#50ADD3;  
  132.     left: 5px;  
  133.     right: 5px;  
  134. }  
  135. .stamp04 .copy{  
  136.     padding: 10px 6px 10px 12px;  
  137.     font-size: 24px;  
  138. }  
  139. .stamp04 .copy p{  
  140.     font-size: 14px;  
  141.     margin-top: 5px;  
  142.     margin-bottom: 8px;  
  143. }  
  144. .stamp04 .copy a{  
  145.     background-color:#fff;  
  146.     color:#333;  
  147.     font-size: 14px;  
  148.     text-decoration:none;  
  149.     padding:5px 10px;  
  150.     border-radius:3px;  
  151.     display: block;  
  152. }  
  153. </style>  
  154.   
  155. <div class="demo">  
  156. <div class="stamp stamp01">  
  157.     <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>  
  158.     <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>  
  159.     <i></i>  
  160. </div>  
  161. <div class="stamp stamp02">  
  162.     <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>  
  163.     <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>  
  164.     <i></i>  
  165. </div>  
  166. <div class="stamp stamp03">  
  167.     <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>  
  168.     <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><href="#">立即使用</a></div>  
  169.     <i></i>  
  170. </div>  
  171. <div class="stamp stamp04">  
  172.     <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>  
  173.     <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><href="#">立即使用</a></div>  
  174.     <i></i>  
  175. </div>  
  176. </div></div>  

posted on   大西瓜3721  阅读(237)  评论(0编辑  收藏  举报

努力加载评论中...

导航

点击右上角即可分享
微信分享提示