لطفا صبر کنید ...

ایجاد جدول قیمت گذاری در وب سایت با CSS3

الهام غایب

توسط الهام غایب

نویسنده
دیدگاه ها: 0
بازدید ها : 93
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در زمان طراحی یک جدول قیمت گذاری برای یک محصول یا خدمات در وب سایت، کار شما به عنوان طراح وب یا برنامه نویس اطمینان حاصل کردن از قابل درک بودن و شفافیت این جدول برای کاربران است.


در طراحی زیبا، خلاقانه و قابل درک جدول در سایت، شما باید به کاربران کمک کنید تا بهترین گزینه را برای نیازهای خود انتخاب کنند. در این مقاله آموزشی در لیداوب، شما می‌آموزید که چگونه یک جدول قیمت گذاری با CSS3 ایجاد کنید که نیاز به استفاده از هیچگونه تصویری ندارد و کدهای HTML کمی در آن به کار رفته است و به خوبی برای کاربران قابل درک باشد.

ایجاد جدول قیمت گذاری با CSS3

کدهای HTML

در اینجا، قطعه‌ای از کدهای HTML که دارای بخش Enterprise می‌باشد را مشاهده می‌کنید:

<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;
    border-radius: 5px;
    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) {
    border-radius: 5px 0 0 5px;        
}

#pricing-table .plan:nth-child(4) {
    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: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
    background-color: #ddd;
    background-image: linear-gradient(#eee, #ddd);
    margin-top: -30px;
    padding-top: 30px;
    border-radius: 5px 5px 0 0;         
}

#pricing-table .plan:nth-child(1) h3 {
    border-radius: 5px 0 0 0;       
}

#pricing-table .plan:nth-child(4) h3 {
    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;
    border-radius: 100px;
    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: linear-gradient(#72ce3f, #62bc30);
    border-radius: 3px;     
    text-shadow: 0 1px 0 rgba(0,0,0,.3);        
    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: linear-gradient(#62bc30, #72ce3f); 
}

#pricing-table .signup:active, #pricing-table .signup:focus {
    background: #62bc30;       
    top: 2px;
    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
} 

چرا باید از این نوع طراحی در جدول قیمت گذاری خود استفاده کنیم؟ گرچه ساختار این طراحی بر پایه جدول نیست اما مزایای آن شامل موارد زیر است:

- کمترین استفاده از کدهای HTML

- عدم استفاده از تصاویر و نگهداری و بروز رسانی آسان

- قابل نمایش در مرورگرهای وب قدیمی‌تر

ایجاد جدول قیمت با CSS3

در نمونه ای که در این مقاله به کار رفته است برخی از تکنیک‌ها مثل هایلایت کردن طرح پیشنهادی، برجسته کردن قیمت و قرار دادن طرح‌ها به ترتیب نزولی استفاده شده است.

مطالعه مقالات بیشتر در لیداوب:

 امیدوارم با مطالعه این مقاله آموزشی بتوانید جداول قیمت گذاری زیبا و قابل درک در وب سایت خود طراحی کنید تا کاربران بتوانند به راحتی از آن استفاده کنند. برای مطالعه بیشتر جهت یادگیری طراحی سایت، می‌توانید مقالات و دوره‌های آموزشی تخصصی لیداوب را در زمینه‌های مختلف دنبال کنید. همچنین، اگر دارای تخصص خاصی در زمینه طراحی سایت هستید، می‌توانید تخصص خود را با کاربران لیداوب به اشتراک بگذارید. اطلاعات بیشتر را می‌توانید در این صفحه به دست آورید. 

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های