Pure CSS3 Fashion price List design effect

Brief tutorials

This is a fashion price list made with pure CSS3. The price list is laid out by bootstrap, with a flat style and a smooth transition of color when the mouse is over.

How to use

HTML structure

The basic HTML structure of the price list is as follows:

<div class= "Container" > <div class= "Row" > <div class= "col-md-3 col-sm-6" > <div C lass= "Pricingtable" > <div class= "Pricingtable-header" > 

CSS Styles

Complete all the CSS code for the price list as follows:

. 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;} }
The above is pure CSS3 fashion Price table design effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

