순수한 CSS3 패션 가격표 디자인 효과

간단한 튜토리얼

순수한 CSS3를 사용하여 만든 세련된 가격표입니다. 가격표는 부트스트랩을 통해 배치되며 플랫 스타일을 채택하고 있으며 마우스를 위로 이동할 때 부드러운 전환 색상 변경 효과도 있습니다.

HTML 구조 사용 방법

가격표의 기본 HTML 구조는 다음과 같습니다.

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <h3 class="heading">Standard</h3>
                    <span class="price-value">
                        <span class="currency">$</span> 10
                        <span class="month">/mo</span>
                    </span>
                </div>
                <div class="pricing-content">
                    <ul>
                        <li>50GB Disk Space</li>
                        <li>50 Email Accounts</li>
                        <li>50GB Monthly Bandwidth</li>
                        <li>10 Subdomains</li>
                        <li>15 Domains</li>
                    </ul>
                    <a href="#" class="read">sign up</a>
                </div>
            </div>
        </div>
  
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <h3 class="heading">Business</h3>
                    <span class="price-value">
                        <span class="currency">$</span> 20
                        <span class="month">/mo</span>
                    </span>
                </div>
                <div class="pricing-content">
                    <ul>
                        <li>60GB Disk Space</li>
                        <li>60 Email Accounts</li>
                        <li>60GB Monthly Bandwidth</li>
                        <li>15 Subdomains</li>
                        <li>20 Domains</li>
                    </ul>
                    <a href="#" class="read">sign up</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS 스타일

가격표 완성하기 모든 CSS 코드는 다음과 같습니다.

.pricingTable{
      text-align: center;
  }
  .pricingTable .pricingTable-header{
      padding: 30px 0;
      background: #4d4d4d;
      position: relative;
      transition: all 0.3s ease 0s;
  }
  .pricingTable:hover .pricingTable-header{
      background: #09b2c6;
  }
  .pricingTable .pricingTable-header:before,
  .pricingTable .pricingTable-header:after{
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #d9d9d8;
      position: absolute;
      bottom: 12px;
  }
  .pricingTable .pricingTable-header:before{
      left: 40px;
  }
  .pricingTable .pricingTable-header:after{
      right: 40px;
  }
  .pricingTable .heading{
      font-size: 20px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-top: 0;
  }
  .pricingTable .price-value{
      display: inline-block;
      position: relative;
      font-size: 55px;
      font-weight: bold;
      color: #09b1c5;
      transition: all 0.3s ease 0s;
  }
  .pricingTable:hover .price-value{
      color: #fff;
  }
  .pricingTable .currency{
      font-size: 30px;
      font-weight: bold;
      position: absolute;
      top: 6px;
      left: -19px;
  }
  .pricingTable .month{
      font-size: 16px;
      color: #fff;
      position: absolute;
      bottom: 15px;
      right: -30px;
      text-transform: uppercase;
  }
  .pricingTable .pricing-content{
      padding-top: 50px;
      background: #fff;
      position: relative;
  }
  .pricingTable .pricing-content:before,
  .pricingTable .pricing-content:after{
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #7c7c7c;
      position: absolute;
      top: 12px;
  }
  .pricingTable .pricing-content:before{
      left: 40px;
  }
  .pricingTable .pricing-content:after{
      right: 40px;
  }
  .pricingTable .pricing-content ul{
      padding: 0 20px;
      margin: 0;
      list-style: none;
  }
  .pricingTable .pricing-content ul:before,
  .pricingTable .pricing-content ul:after{
      content: "";
      width: 8px;
      height: 46px;
      border-radius: 3px;
      background: linear-gradient(to bottom,#818282 50%,#727373 50%);
      position: absolute;
      top: -22px;
      z-index: 1;
      box-shadow: 0 0 5px #707070;
      transition: all 0.3s ease 0s;
  }
  .pricingTable:hover .pricing-content ul:before,
  .pricingTable:hover .pricing-content ul:after{
      background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
  }
  .pricingTable .pricing-content ul:before{
      left: 44px;
  }
  .pricingTable .pricing-content ul:after{
      right: 44px;
  }
  .pricingTable .pricing-content ul li{
      font-size: 15px;
      font-weight: bold;
      color: #777473;
      padding: 10px 0;
      border-bottom: 1px solid #d9d9d8;
  }
  .pricingTable .pricing-content ul li:last-child{
      border-bottom: none;
  }
  .pricingTable .read{
      display: inline-block;
      font-size: 16px;
      color: #fff;
      text-transform: uppercase;
      background: #d9d9d8;
      padding: 8px 25px;
      margin: 30px 0;
      transition: all 0.3s ease 0s;
  }
  .pricingTable .read:hover{
      text-decoration: none;
  }
  .pricingTable:hover .read{
      background: #09b1c5;
  }
  @media screen and (max-width: 990px){
      .pricingTable{ margin-bottom: 25px; }
  }

위 내용은 순수 CSS3 패션 가격표 디자인 효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn)!