«
»

Pricing ب CSS 2.1 و XHTML

الجمعة 1 يناير 2010

إن كنت تملك تطبيقا أو خدمة ويب وبحاجة لتصميم خطط اشتراك بشكل أنيق وبفكرة مختلفة عن استعمال الجداول Tables فإليك إحدى الطرق باستعمال CSS ووسوم XHTML 1.0 ولما لا بعض التأثيرات الجميلة ب CSS3

مثال مباشر لما أتحدث عنه

فكرة الدرس هي تصميم خطة اشتراك واحدة وإعطاء بعض الخصائص لاظهار السعر ومميزات الخطة .. ثم تكرار الخطة وتغيير بيانات الخطة، مع إمكانية تمييز Plan معين بلون أو حجم وشكل مختلف ..

XHTML 1.0

<div class="plan">
<h3>Personal</h3>
<strong>$20</strong>
    <span>per month</span>
Use for your work team or project ..
<ul>
	<li>250 Mb storage</li>
	<li>support SSl</li>
	<li>15 users per project</li>
</ul>
<a class="button" href="#">sign up</a></div>

وسوم Tags لا تحتاج لشرح، سأتحكم فيها عن طريق CSS، قبل ذلك أكرر Class عدة مرات حسب عدد الخطط الذي لدي، ويمكنني اضافة Class جديد لخطة معينة كالاتي:

<div class="plan free">
Code ..
</div>

سأغير فقط بعض الخصائص الخصة ب Class الجديد:

CSS

#main .free {
 background-color: #9CC9E3;
 font-size:large; font-weight: bolder;
 border-color:#4A9CCB
}

ولا حاجة لأن أعيد كتابة كل خصائص Class الجديد

CSS

ساضع أهم خصائص يجب اعطائها ل Class الأول هو Plan هنا، والبقية من اختيار رغبة المطور ..

#main .box {
    float: left;
    width: 196px;
    margin: 05px 05px 05px 0;
}

إن كانت الصفحة من اليمين إلى اليسار فغير الاتجاه فقط، وبقية الخصائص متوفرة في الصفحة المثال. وهذه طريقة من بين طرق عديدة.

أمثلة من مواقع أجنبية لمزيد من الإلهام:

يمكن أن يكون Pricing بسيطا وفي جدول عادي:

7 تعليقات

  1. سعود بن محمد قال:
    1 يناير 2010 الساعة 22:48

    طريقة ترتيب جداً رائعة أتمنى كل المواقع مثل كذا .. مع توفير رابط صغير في الأسفل (للمزيد)

    أما الطريقة الأخرى كما في المثالين الأخيرة التي أضفتها .. فأعتقد أنها غير مريحة أو غير مرتبة .. فقط تنفع للمقارنة وليست لعرض الأسعار ..!

    شكراً لك على الدرس المرتب .. وبارك الله فيك

  2. zoe4ever قال:
    1 يناير 2010 الساعة 22:48

    تأثير رائع جدا وأنيق

    ما أجمل CSS

  3. cssbit قال:
    1 يناير 2010 الساعة 22:57

    سعود بن محمد:
    أوافقك البيانات التي تصمم بالجداول Tabular تكون عادة للمقارنة بحيث يرى الزائر البيانات عموديا وأفقيا

    zoe4ever:
    أعجبتني فكرة موقع Peashootapp مع ادماج القليل من الغرافيكس كحبة البازلاء Pea التي على اليسار

  4. Tweets that mention Pricing ب CSS 2.1 و XHTML « cssbit 2.0 -- Topsy.com قال:
    2 يناير 2010 الساعة 01:04

    [...] This post was mentioned on Twitter by Abdelhadi Touil and feed webdesign arab, fatin khawarizmi. fatin khawarizmi said: RT @webdesign_arab: Pricing ب CSS 2.1 و XHTML http://bit.ly/6ylMbh [...]

  5. Twitted by bzizit قال:
    2 يناير 2010 الساعة 01:10

    [...] This post was Twitted by bzizit [...]

  6. Hosam Adel قال:
    2 يناير 2010 الساعة 03:20

    شكلها فعلاً مُميزة وعملية أكثر
    ويا سلام لو فيه تأثيرات CSS3 مثلاً ظل للسعر أو إسم الخطة
    Thanks cssbit

  7. عماري عمران قال:
    2 يناير 2010 الساعة 12:01

    طريقة ممتازة وبسيطة، للأسف لا زالت المواقع العربية لا تؤمن بالبساطة والجمال

أضف تعليقا

لن يظهر بريدك لأحد آخر

إن أردت