Thứ Tư, 21 tháng 11, 2012

css3 pricing table

  • Cơ bản
  • 20 000 VND/Tháng
  • Dung lượng 200MB
  • Băng thông 20GB
  • Sub domain 20
  • MySQL5 2
  • Park Domain 2
  • Addon Domain 2
  • Mua ngay
  • Doanh nghiệp
  • 50 000 VND/Tháng
  • Dung lượng 500MB
  • Băng thông 50GB
  • Sub domain 50
  • MySQL5 5
  • Park Domain 5
  • Addon Domain 5
  • Mua ngay
  • Nâng cao
  • 100 000 VND/Tháng
  • Dung lượng 1000MB
  • Băng thông 100GB
  • Sub domain 100
  • MySQL5 10
  • Park Domain 10
  • Addon Domain 10
  • Mua ngay
HTML
<div class="pricing_table">
        <ul>
            <li>Cơ bản</li>
            <li>20 000 VND/Tháng</li>
            <li>Dung lượng 200MB</li>
            <li>Băng thông 20GB</li>
            <li>Sub domain 20</li>
            <li>MySQL5 2</li>
            <li>Park Domain 2</li>
            <li>Addon Domain 2</li>
            <li></li>
            <li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
        </ul>
<ul>
            <li>Doanh nghiệp</li>
            <li>50 000 VND/Tháng</li>
            <li>Dung lượng 500MB</li>
            <li>Băng thông 50GB</li>
            <li>Sub domain 50</li>
            <li>MySQL5 5</li>
            <li>Park Domain 5</li>
            <li>Addon Domain 5</li>
            <li></li>
            <li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
        </ul>
<ul>
            <li>Nâng cao</li>
            <li>100 000 VND/Tháng</li>
            <li>Dung lượng 1000MB</li>
            <li>Băng thông 100GB</li>
            <li>Sub domain 100</li>
            <li>MySQL5 10</li>
            <li>Park Domain 10</li>
            <li>Addon Domain 10</li>
            <li></li>
            <li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
        </ul>
</div>

CSS

.pricing_table {
    border:1px solid #c4cbcc;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    outline:7px solid #f2f3f3;
    float:left;
}
/*Tạo dáng cho các cột*/
.pricing_table ul {
    list-style:none; /* Loại bỏ các bullet */
    float:left; /* Float lists sang trái */
    width:147px; /* Chiều rộng của mỗi cột */
    margin:0;
    border:1px solid #f2f3f3; /*Thêm một chút viền cho đẹp mắt^^ */
    padding:5px;
    text-align:center; /* Canh giữa cho văn bản */
    background-color:#FFF; /* Màu nên trắng */
}
/*Hiệu ứng hover khi rê chuột vào bảng*/
.pricing_table ul:hover {
    -webkit-transform: scale(1.1); /* Chuyển đổi cột với một quy mô là 1,1 -> làm tăng 10% kích thước ban đầu. */
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7); /* Tạo bóng cho hộp */
    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
    box-shadow:3px 5px 7px rgba(0,0,0,.7);
    cursor:pointer; /* Thay đổi hiệu ứng trỏ chuột */
}
/*Tạo dáng cho mỗi list (danh sách)*/

.pricing_table ul li {
    border-bottom:1px dashed #cfd2d2;
    padding:10px 0;
}
/*Tạo dáng cho các dòng*/
.pricing_table ul li:first-child { /* Hàng đầu tiên cần phải có phông chữ lớn hơn và được nhấn mạnh. */
    font-size:18px;
    font-weight:bold;
}
.pricing_table ul li:nth-child(2) { /* Trên hàng thứ hai, chúng ta cần một nền màu tối hơn. */
    background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) { /* Với hàng thứ 3, chúng ta cần một phông chữ nhỏ hơn nhưng được nhấn mạnh. */
    font-size:12px;
    font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) { /* Với các hàng còn lại chúng ta cần phải thiết lập kích thước phông chữ là 14pixels. */
    font-size:14px;
}
.pricing_table ul li:last-child a { /* Trên dòng cuối cùng, chúng ta sẽ để thêm một liên kết (ví dụ như nút submit chẳng hạn). */
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border:1px solid #c4cbcc;
    padding:10px;
    margin:5px 0;
    background: #B2D6AA; /* Old browsers */
    background: -moz-linear-gradient(top, #B2D6AA 0%, #498742 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B2D6AA), color-stop(100%,#498742)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #B2D6AA 0%,#498742 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #B2D6AA 0%,#498742 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #B2D6AA 0%,#498742 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2D6AA', endColorstr='#498742',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #B2D6AA 0%,#498742 100%); /* W3C */
    color:#000;
    font-style:italic;
    display:block;
}
Thanks: paulund.co.uk

Chủ đề: