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

선형 그래디언트에서 본 시작 위치와 방향도 마찬가지입니다. 색상으로 방사형 그래디언트를 사용하면 그래디언트의 모양(원 또는 타원)과 크기(가장 가까운 쪽, 가장 가까운 모서리, 가장 먼 쪽, 가장 먼 모서리, 포함 또는 덮개)를 지정할 수 있습니다. 색상 중지점: 선형 그래디언트와 마찬가지로 그래디언트 선을 따라 그래디언트의 시작 및 끝 색상을 정의해야 합니다.

쿠폰만들때 가장 중요한 코드는 이 세가지 문장입니다

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

더 이상 설명은 필요 없이 코드대로 가세요

coupon

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 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS3를 사용하여 흑백 사진 효과를 만들기 위한 회색조 필터 작성

#🎜 🎜 #

CSS3을 사용하여 마우스를 올렸을 때 테두리 회전

css3를 사용하여 순환 진행률 표시줄을 구현하는 방법# 🎜 🎜#

위 내용은 CSS3 방사형 그래디언트를 사용하여 쿠폰 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!