CSS3放射状グラデーションを使用してクーポンを作成する

この記事では、css3 放射状グラデーションを使用してクーポンを作成する例についての関連情報を主に紹介します。内容は非常に優れているので、参考として共有します。

クーポンやクーポンなどのクーポンは多くのショッピングサイトで見られますが、基本的には写真を直接投稿するものなので、CSSを使用して作成することを考えたことはありますか?では、どうやって画像を切り取って背景にタイル状のエッジを作るかというと、CSS3 の技術が進歩した現在、タイル状の背景を使うのは時代遅れだと考えました。 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>]*);

線形グラデーションですでに見た開始位置、方向、色に加えて、放射状グラデーションでは、その形状を指定できます。グラデーション (円または楕円) とサイズ (最も近い側、最も近い角、最も遠い側、最も遠い角、包含またはカバー)。 カラーストップ: 線形グラデーションの場合と同様に、グラデーション ラインに沿ってグラデーションの開始色と終了色を定義する必要があります。

クーポンを作成するための最も重要なコードは次のとおりです。この 3 つの文だけです

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 コード

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

追記: この方法でスタンプを作ることもできます。信じられない方はぜひ試してみてください

以上がこの記事の全内容であり、その他の関連コンテンツについてもお役に立てれば幸いです。 、PHP 中国語 Web サイトに注意してください。

関連する推奨事項:

CSS3 を使用してグレースケール フィルターを記述し、白黒の写真効果を作成します

CSS3 を使用して、マウスをホバーしたときに境界線の回転を作成します

css3 を使用して円形の進行状況バー

以上がCSS3放射状グラデーションを使用してクーポンを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。