Créer un coupon en utilisant le dégradé radial CSS3-tutoriel CSS-php.cn

Créer un coupon en utilisant le dégradé radial CSS3

不言

Libérer： 2018-07-02 10:20:47

original

1664 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'exemple d'utilisation du dégradé radial CSS3 pour créer un coupon. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Vous pouvez voir des coupons, des bons d'achat et d'autres coupons sur de nombreux sites Web d'achats, mais ce sont essentiellement des images directement publiées. Alors avez-vous déjà pensé à utiliser du CSS pour en créer un. Quoi qu'il en soit, je le pense. Alors, comment faire ? Couper l'image pour créer un bord en mosaïque pour l'arrière-plan. Eh bien, j'y ai réfléchi. Maintenant que la technologie CSS3 est si avancée, l'utilisation de l'arrière-plan pour les mosaïques est obsolète. Je vais donc la présenter aujourd'hui. à vous une méthode utilisant le dégradé radial CSS3 de coupons.

Le dégradé radial CSS3 et le dégradé linéaire sont très similaires Regardons d'abord sa syntaxe :

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

Copier après la connexion

En plus de la position de départ, de la direction et de la couleur que vous avez déjà vues dans les dégradés linéaires Radial. Le dégradé vous permet de spécifier la forme (cercle ou ellipse) et la taille (côté le plus proche, coin le plus proche, côté le plus éloigné, côté le plus proche, coin le plus proche, côté le plus éloigné, coin le plus éloigné, contenir ou couvrir)). Arrêts de couleur : tout comme pour un dégradé linéaire, vous devez définir les couleurs de début et de fin du dégradé le long de la ligne de dégradé.

Le code le plus important pour créer des coupons est le suivant, qui sont ces trois phrases

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

Copier après la connexion

Aucune autre explication, allez simplement au code

Coupon

Code CSS

Ceci est un style public

.stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;}
.stamp:before {content: &#39;&#39;;position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
.stamp:after {content: &#39;&#39;;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;}

Copier après la connexion

Code HTML

<p class="stamp stamp01">
<p class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></p>
<p class="copy">副券<p>2015-08-13<br>2016-08-13</p></p>
<i></i>
</p>
<p class="stamp stamp02">
<p class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></p>
<p class="copy">副券<p>2015-08-13<br>2016-08-13</p></p>
<i></i>
</p>
<p class="stamp stamp03">
<p class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></p>
<p class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></p>
<i></i>
</p>
<p class="stamp stamp04">
<p class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></p>
<p class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></p>
<i></i>
</p>

Copier après la connexion

PS : Vous pouvez également faites des tampons de cette façon, ne me croyez pas. Vous essayez

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois !

Recommandations associées :

Utilisez CSS3 pour écrire des filtres en niveaux de gris afin de créer des effets photo en noir et blanc

Souris créée avec CSS3 Rotation des bordures au survol

Comment utiliser CSS3 pour implémenter une barre de progression circulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!