• 1
  • 2
Home > Tips

Excellent CSS3 Pricing Table Free Download | SliceMaker Soft




 

 


Brief Introduction to the CSS3 Pricing Table

The above pricing table is a pure CSS3 pricing table created by SliceMaker staff - Chris (chris@slicemaker.com). The most important feature of the CSS3 pricing table is the use of CSS3 gradient. Firstly, Chris used the CSS3 gradient to make the overall background (The whole background of the CSS3 pricing table page); the second time he used the CSS3 gradient to make the grid patterns (The title part of each pricing table); the third time he used the CSS3 gradient to make the jagged patterns. The most difficult part is the jagged patterns. If you want to know how to create this kind of CSS3 pricing table, please continue reading this article.



How to Create the above CSS3 Pricing Table

To help you understand how to create the above CSS3 pricing table, wed like to share the related HTML and CSS codes with you. There are necessary explanations within the HTML and CSS codes. However, if youre not familiar with the HTML and CSS codes, you can directly download the CSS3 pricing table and then edit it for your own use or you can contact our support team (support@slicemaker.com) or the author of the CSS3 pricing table Chris (chris@slicemaker.com) for help.

 

HTML Codes for the CSS3 Pricing Table

 <div class='tableWrap'>
  <div class='table light'>
    <h2>SliceMaker<em>SliceMaker Standard Free Download</em></h2>
    <div class='price'>
      <span>$<em>39</em>.95</span>
      <span>LIFETIME</span>
      <button type='button'>BUY</button>
    </div>
    <ul>
      <li>12/24 Tech Support</li>
      <li>Automated CSS Generator</li>
      <li>Professional and Easy</li>
      <li>User Friendly</li>
    </ul>
    <p>SliceMaker Standard is the anyone-can-master webpage making software. </p>
  </div>
  <div class='table run'>
    <h2>SliceMaker<em>SliceMaker Platinum Free Download</em></h2>
    <div class='price'>
      <span>$<em>69</em>95</span>
      <span> LIFETIME</span>
      <button type='button'>BUY</button>
    </div>
    <ul>
      <li>12/24 Tech Support</li>
     <li>Automated CSS Generator</li>
      <li>Professional and Easy</li>
      <li>User Friendly</li>
    </ul>
    <p>SliceMaker Platinum is the best-selling webpage making software of SliceMaker products.</p>
  </div>
  <div class='table fly'>
    <h2>SliceMaker<em>SliceMaker Deluxe Free Download</em></h2>
    <div class='price'>
      <span>$<em>99</em>95</span>
      <span> LIFETIME </span>
      <button type='button'>BUY</button>
    </div>
    <ul>
      <li>12/24 Tech Support</li>
      <li>Automated CSS Generator</li>
      <li>Professional and Easy</li>
      <li>User Friendly</li>
    </ul>
    <p>SliceMaker Deluxe is the all-in-one webpage making software of SliceMaker products.</p>
  </div>
</div>

 

CSS Codes for the CSS3 Pricing Table

 

/*Explanations: Set the body styles*/
body{
  font-size:12px;
  font-family:Verdana;
  -webkit-text-size-adjust:none;
  background: -*-linear-gradient(left, #464f76, #553a65, #6c3c4a, #683a4a); /*Explanations:*Use CSS3 gradient to make the overall background */
}
/* Explanations: Use the clock fonts*/
@font-face{
  font-family:'fonticon';
  src:url(font/clock.eot);
  src:url(font/clock.eot#iefix) format('embedded-opentype'),
  url(font/clock.woff) format('woff'),
  url(font/clock.ttf) format('truetype'),
  url(font/clock.svg) format('svg');
  font-weight:normal;
  font-style:normal;
}
/* Explanations: Table container*/
.tableWrap{
  width:750px;
  margin:50px auto; /* Explanations: Center*/
}
/* Explanations: Table*/
.table{
  width:215px;
  border:none;
  border-radius:5px;
  color:#fff;
  float:left;
  margin-right:20px;
}
/* Explanations: Table Title*/
.table > h2{
  font-size:26px;
  text-align:center;
  text-shadow:0 0 2px rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0px rgba(255,255,255,.5); /* Explanations: Make the inner glow effect */
  padding-top:14px;
  height:65px;
  border-radius:5px 5px 0 0;
  /* Explanations: Using gradient and background-size to make grid patterns*/
  background-color:rgba(107,92,147,.6);
  background-size: 4px 4px;
  background-image: -*-linear-gradient(45deg, #706096 25%, transparent 25%, transparent 75%, #706096 75%, #706096), -*-linear-gradient(-45deg, #706096 25%, transparent 25%, transparent 75%, #706096 75%, #706096);
}
/* Explanations: Subtitle of the table*/
.table > h2 em{
  display:block;
  font-size:12px;
  color:#fff;
  line-height:22px;
  font-weight:normal;
}
/* Explanations: The middle grid pattern effect */
.table:nth-child(2) > h2{
  background-color:#ecb811;
  background-size: 4px 4px;
    background-image: -*-linear-gradient(45deg, #f0bf16 25%, transparent 25%, transparent 75%, #f0bf16 75%, #f0bf16), -*-linear-gradient(-45deg, #f0bf16 25%, transparent 25%, transparent 75%, #f0bf16 75%, #f0bf16);
}
/* Explanations: price label*/
.table .price{
  background:#eddff7;
  padding:30px 0 0;
  text-align:center;
  position:relative;
}
/* Explanations: The jagged pattern effect*/
.table .price:after{
  display:block;
  content:'';
  height:10px;
  margin-top:20px;
  background-color:#2a1e33;
  background-size:10px 20px;
  background-image:linear-gradient(45deg, #eddff7 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #eddff7 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #eddff7 75%),
    linear-gradient(-45deg, transparent 75%, #eddff7 75%);
}

.table:nth-child(2) .price{
  background:#f4eacd;
}
.table:nth-child(2) .price:after{
  background-image:linear-gradient(45deg, #f4eacd 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #f4eacd 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #f4eacd 75%),
    linear-gradient(-45deg, transparent 75%, #f4eacd 75%);
}
.table .price span{
  display:block;
  color:#9c6dbd;
  font-size:24px;
  font-weight:bold;
  margin-top:-15px;
}
.table:nth-child(2) .price span{
  color:#eca013;
}
.table .price span em{
  font-size:50px;
  font-style:normal;
  vertical-align:-10px;
}
.table .price span:nth-child(2){
  font-size:14px;
  margin-top:-10px;
  font-family:Helvetica;
}
/* Explanations: BUY button*/
.table .price button{
  position:absolute;
  color:#fff;
  font-size:14px;
  font-weight:bold;
  right:-5px;
  border:none;
  top:38px;
  width:62px;
  height:32px;
  line-height:32px;
  background:-*-linear-gradient(top,#ba8bdb,#8b5bac);
  box-shadow:0 0 2px rgba(0,0,0,.5);
}
.table:nth-child(2) .price button{
  color:#fff;
  background:-*-linear-gradient(top,#f1c312,#ec9f13);
}   
/* Explanations: The ribbon effect of the button*/
.table .price button:before{
  display:inline-block;
  content:'';
  position:absolute;
  top:-8px;
  left:-5px;
  border-style:solid;
  border-color:transparent #EDDFF7 transparent transparent;
  border-width:24px 12px;
  transform: rotate(180deg);
}
.table:nth-child(2) .price button:before{
  border-color:transparent #f4eacd transparent transparent;
}
.table .price button:after{
  display:inline-block;
  content:'';
  position:absolute;
  top:31px;
  right:0;
  border-style:solid;
  border-color:transparent transparent #1A1D1E #1A1D1E;
  border-width:3px 2px;
  transform: rotate(90deg);
}
/* Explanations: The list effect of the pricing table */
.table ul{
  background:rgba(0,0,0,.5);
  padding:30px 0;
}
.table ul li{
  padding-left:15px;
  border-bottom:solid 1px #5c5971;
  line-height:30px;
  cursor:pointer;
}
.table ul li:nth-child(4), .table ul li:last-child{
  border-bottom:none;
}
/* Explanations: The icons before the each list item*/
.table ul li:before{
  font-family:'fonticon';
  display:inline-block;
  content:'\1F554';
  font-size:16px;
  vertical-align:-1px;
  margin-right:8px;
}
.table ul li:nth-child(2):before{
  content:'\1f4c1';
  font-size:12px;
  vertical-align:1px;
}
.table ul li:nth-child(3):before{
  content:'\2605';
  vertical-align:-2px;
}
.table ul li:nth-child(4):before{
  content:'\2665';
  vertical-align:-2px;
}
 
.table ul li:hover{
  background:rgba(0,0,0,.15);
  box-shadow:inset 0 0 2px #000;
}

.table p {
  border-radius: 0 0 5px 5px;
  background: rgba(0, 0, 0, .5);
  padding: 0 15px 30px;
  text-align: center;
}



Terms of use for the CSS Pricing Table

The CSS3 pricing table is created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the CSS3 pricing table and then edit the CSS3 pricing table for their own use. If you are interested in this CSS3 pricing table, please feel free to download it. If you have problem understanding or editing the CSS3 pricing table, please feel free to contact our support team (support@slicemaker.com) or the author of the CSS3 pricing table - Chris (chris@slicemaker.com) for help.

 

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0