CSS3制作价格表二

CSS3制作价格表二

上回@格子同学使用div模仿了一个价格表格,外观优美,只是其中有一些内容和样式结合在一起,分离不够完美。今天她再次为大家制作了一个价格表格。这次案例中修正了上一回的内容与样式的结合问题,并且利用CSS3制作出完美的UI效果。其中最为有特色的就是CSS3渐变的运用。第一使用渐变制作了一个大背景,第二使用渐变制作了一个网格纹理效果,第三使用渐变制作了锯齿花边效果。在这三个效果中应数锯齿花边难做,如果你不知道如何制作这样的效果,不仿跟着这个案例往下看看。

demo download

HTML结构

<div class="tableWrap">
  <div class="table light">
    <h2>LIGHT<em>great for small business</em></h2>
    <div class="price">
      <span>$<em>5</em></span>
      <span>MONTHLY</span>
      <button type="button">JOIN</button>
    </div>
    <ul>
      <li>12/24 Tech Support</li>
      <li>Advanced Options</li>
      <li>100GB Storage</li>
      <li>1GB Bandwidth</li>
    </ul>
    <p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
  </div>
  <div class="table run">
    <h2>RUN<em>great for small business</em></h2>
    <div class="price">
      <span>$<em>9</em>59</span>
      <span>MONTHLY</span>
      <button type="button">JOIN</button>
    </div>
    <ul>
      <li>12/24 Tech Support</li>
      <li>Advanced Options</li>
      <li>100GB Storage</li>
      <li>1GB Bandwidth</li>
    </ul>
    <p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
  </div>
  <div class="table fly">
    <h2>FLY<em>great for small business</em></h2>
    <div class="price">
      <span>$<em>12</em></span>
      <span>MONTHLY</span>
      <button type="button">JOIN</button>
    </div>
    <ul>
      <li>12/24 Tech Support</li>
      <li>Advanced Options</li>
      <li>100GB Storage</li>
      <li>1GB Bandwidth</li>
    </ul>
    <p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
  </div>
</div>

CSS 代码

/*设置body样式*/
body{
  font-size:12px;
  font-family:Verdana;
  -webkit-text-size-adjust:none;
  background: -*-linear-gradient(left, #464f76, #553a65, #6c3c4a, #683a4a);/*渐变制作多色渐变*/
}
/*引用clock字体*/
@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;
}
/*表格容器*/
.tableWrap{
  width:750px;
  margin:50px auto; /*居中*/
}
/*表格*/
.table{
  width:215px;
  border:none;
  border-radius:5px;
  color:#fff;
  float:left;
  margin-right:20px;
}
/*表格标题*/
.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);/*制作内发光效果*/
  padding-top:14px;
  height:65px;
  border-radius:5px 5px 0 0;
  /*渐变配合background-size制作网格纹理*/
  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);
}
/*表格次标题*/
.table > h2 em{
  display:block;
  font-size:12px;
  color:#fff;
  line-height:22px;
  font-weight:normal;
}
/*中间表格网格纹理效果*/
.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);
}
/*价格标签*/
.table .price{
  background:#eddff7;
  padding:30px 0 0;
  text-align:center;
  position:relative;
}
/*锯齿花边效果*/
.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;
}
/*join按钮*/
.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);
}    
/*按钮ribbon效果*/
.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);
}
/*表格列表效果*/
.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;
}
/*列表前icon实现*/
.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;
}

demo download

如需转载,烦请注明出处:http://www.w3cplus.com/demo/pure-css3-create-price-table2.html

返回顶部