CSS3 таблица цен

При разработке сайта для продукта или услуги, ваша работа в качестве веб-дизайнера / разработчика, заключается в том чтобы ваша таблица цен,имела интуитивно понятный и легкий использовании дизайн. Таким образом, вы поможете пользователям выбрать лучший план для их потребностей.

Итак, в этой статье вы узнаете, как построить таблицу цен с помощью CSS3, без изображения и минимальной разметки HTML.

Посмотреть   демо

HTML

Вот выдержка с разметкой предприятия раздела:

   <div id="pricing-table" class="clear">

    <div class="plan">

        <h3>Enterprise<span>$59</span></h3>

        <a class="signup" href="">Sign up</a>        

        <ul>

            <li><b>10GB</b> Disk Space</li>

            <li><b>100GB</b> Monthly Bandwidth</li>

            <li><b>20</b> Email Accounts</li>

                    <li><b>Unlimited</b> subdomains</li>                                     

        </ul>

    </div>

    ...

</div>

CSS

Создавайте CSS как можно более простым:

#pricing-table {

                margin: 100px auto;

                text-align: center;

                width: 892px; /* total computed width = 222 x 3 + 226 */

}

#pricing-table .plan {

                font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;

                text-shadow: 0 1px rgba(255,255,255,.8);       

                background: #fff;     

                border: 1px solid #ddd;

                color: #333;

                padding: 20px;

                width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */     

                float: left;

                position: relative;

}

#pricing-table #most-popular {

                z-index: 2;

                top: -13px;

                border-width: 3px;

                padding: 30px 20px;

                -moz-border-radius: 5px;

                -webkit-border-radius: 5px;

                border-radius: 5px;

                -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);

                -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);

                box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);   

}

#pricing-table .plan:nth-child(1) {

                -moz-border-radius: 5px 0 0 5px;

                -webkit-border-radius: 5px 0 0 5px;

                border-radius: 5px 0 0 5px;       

}

#pricing-table .plan:nth-child(4) {

                -moz-border-radius: 0 5px 5px 0;

                -webkit-border-radius: 0 5px 5px 0;

                border-radius: 0 5px 5px 0;       

}

/* --------------- */          

#pricing-table h3 {

                font-size: 20px;

                font-weight: normal;

                padding: 20px;

                margin: -20px -20px 50px -20px;

                background-color: #eee;

                background-image: -moz-linear-gradient(#fff,#eee);

                background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));   

                background-image: -webkit-linear-gradient(#fff, #eee);

                background-image: -o-linear-gradient(#fff, #eee);

                background-image: -ms-linear-gradient(#fff, #eee);

                background-image: linear-gradient(#fff, #eee);

}

#pricing-table #most-popular h3 {

                background-color: #ddd;

                background-image: -moz-linear-gradient(#eee,#ddd);

                background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));   

                background-image: -webkit-linear-gradient(#eee, #ddd);

                background-image: -o-linear-gradient(#eee, #ddd);

                background-image: -ms-linear-gradient(#eee, #ddd);

                background-image: linear-gradient(#eee, #ddd);

                margin-top: -30px;

                padding-top: 30px;

                -moz-border-radius: 5px 5px 0 0;

                -webkit-border-radius: 5px 5px 0 0;

                border-radius: 5px 5px 0 0;                       

}

#pricing-table .plan:nth-child(1) h3 {

                -moz-border-radius: 5px 0 0 0;

                -webkit-border-radius: 5px 0 0 0;

                border-radius: 5px 0 0 0;      

}

#pricing-table .plan:nth-child(4) h3 {

                -moz-border-radius: 0 5px 0 0;

                -webkit-border-radius: 0 5px 0 0;

                border-radius: 0 5px 0 0;      

}             

#pricing-table h3 span {

                display: block;

                font: bold 25px/100px Georgia, Serif;

                color: #777;

                background: #fff;

                border: 5px solid #fff;

                height: 100px;

                width: 100px;

                margin: 10px auto -65px;

                -moz-border-radius: 100px;

                -webkit-border-radius: 100px;

                border-radius: 100px;

                -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;

                -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;

                box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;

}

/* --------------- */

#pricing-table ul {

                margin: 20px 0 0 0;

                padding: 0;

                list-style: none;

}

#pricing-table li {

                border-top: 1px solid #ddd;

                padding: 10px 0;

}

/* --------------- */

#pricing-table .signup {

                position: relative;

                padding: 8px 20px;

                margin: 20px 0 0 0; 

                color: #fff;

                font: bold 14px Arial, Helvetica;

                text-transform: uppercase;

                text-decoration: none;

                display: inline-block;      

                background-color: #72ce3f;

                background-image: -moz-linear-gradient(#72ce3f, #62bc30);

                background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));   

                background-image: -webkit-linear-gradient(#72ce3f, #62bc30);

                background-image: -o-linear-gradient(#72ce3f, #62bc30);

                background-image: -ms-linear-gradient(#72ce3f, #62bc30);

                background-image: linear-gradient(#72ce3f, #62bc30);

                -moz-border-radius: 3px;

                -webkit-border-radius: 3px;

                border-radius: 3px;    

                text-shadow: 0 1px 0 rgba(0,0,0,.3);       

                -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);

                -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);

                box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);

}

#pricing-table .signup:hover {

                background-color: #62bc30;

                background-image: -moz-linear-gradient(#62bc30, #72ce3f);

                background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));     

                background-image: -webkit-linear-gradient(#62bc30, #72ce3f);

                background-image: -o-linear-gradient(#62bc30, #72ce3f);

                background-image: -ms-linear-gradient(#62bc30, #72ce3f);

                background-image: linear-gradient(#62bc30, #72ce3f);

}

#pricing-table .signup:active, #pricing-table .signup:focus {

                background: #62bc30;      

                top: 2px;

                -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;

                -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;

                box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;

}

/* --------------- */

.clear:before, .clear:after {

  content:"";

  display:table

}

.clear:after {

  clear:both

}

.clear {

  zoom:1

}                

Internet Explorer 8 - Предпросмотр

Посмотреть демо

Ссылка на источник