إليك طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي
الصفحة مجربة على: Chrome, Safari, Opera, Firefox و IE7

مثال مباشر

بناء نموذج بريدي:

<p>
    <label>username</label>
    <input type='text' name='username' size='30' />
</p>
<p>
    <label>password</label>
    <input type='password' name='password' size='30' />
</p>

إضافة Icon لكل حقل:

form input[type=text] {
    background: url(/images/user.png) no-repeat
}
form input[type=password] {
    background: url(/images/key.png) no-repeat
}

ثم إزاحة الكلمات عن Icon بمقدار معين:

form input {
    text-indent: 1.2em;
}

يمكن أيضا إضافة Class لكل حقل وعدم استعمال Attribute Selectors إن رغبت بإضافة حقول أخرى لا يوفرها Input Type

يمكن الحصول على نماذج بريدية أنيقة، بإضافة خصائص قليلة عن طريق CSS3، ومع أن هناك متصفحات (IE وأحيانا Opera) لا تدعم الخصائص الجديدة ل CSS3 وبالتالي ستظهر التأثيرات فقط لمن يستعمل متصفحات حديثة، (التصاميم الحديثة للمتصفحات الحديثة)

مثال مباشر

بناء النموذج:

<form method='post' action='#'>
  <p>
    <label>name</label>
    <input type='text' name='name' size='30' />
  </p>
</form>

خصائص CSS:

form textarea,
form input {
    border:1px solid #C3A6E1;
    color:#333;
    padding:.3em;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

أضفت منحنى دائري بقيمة 3px لإطار النموذج البريدي سواء كان input أو textarea
خاصية Radius للمتصفحات التي تعتمد على محرك Webkit

form textarea,
form input {
    -webkit-border-radius:3px
}

عند وضع الفارة على النموذج Focus يتم تغيير Border وإضافة Shadow بقيمة خفيفة

form textarea:focus,
form input:focus {
    border:1px solid #96C;
    -moz-box-shadow:0 0 4px #E6D9F2; 
    -webkit-box-shadow:0 0 4px #E6D9F2; 
}

هناك الكثير من المشاكل التي تعترض مطور الويب، بعضها يحتاج لحلول مكلفة، الفكرة التالية توضح كيف يمكن استعمال Jquery لاضافة او تغيير بعض الخصائص في CSS، عندما يتم جلب البيانات من جدول MySQL ويكون التحكم في خصائص أول أو آخر Row مكلفا من ناحية الوقت والجهد، سأعطي مثالا سريعا لأوضح عما أتحدث عنه:

لنفترض أنه لدي صفحات Pages كالموجودة في WordPress وأرغب بإظهار عناوين الصفحات بتنسيق معين ب CSS كأن أفصل بين كل عنوان وآخر ب Border وآخر عنوان في القائمة سيكون بدون إطار

صورة توضح ما أرغب به:

إن كان Code عبارة عن XHTML فقط، سأضيف Class لآخر  رابط كالتالي:

<li class="last">link 4</li>

CSS

ul li.last {border:none}

بينما إن كانت البيانات عبارة عن حلقة While يتم الاستعلام عنها من جدول MySQL ف Jquery توفر حلا (IE لا يدعم pseudo element ولن تظهر التأثيرات معه، يمكن اللجوء إلى بعض Fix):
ببساطة بعد استدعاء ملف jquery (الذي سأستدعيه غالبا لشيء آخر أكثر أهمية)، أضيف ما يلي:

$('ul li:last').css('border','none');

كذلك يمكن هذه الطريقة للحصول على حقول ملونة عند عرض بيانات Tabular كما في الصورة:

JS

$('table tr:odd').css('background','#fff');
$('table tr:even').css('background','#B0D9EC');

الملفات مرفقة

يمكن استعمال CSS() مع Jquery في أكثر من موضع.

إن كنت تملك تطبيقا أو خدمة ويب وبحاجة لتصميم خطط اشتراك بشكل أنيق وبفكرة مختلفة عن استعمال الجداول 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;
}

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

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

• Peashootapp
• Freckle
• Base Camp
• form Spring

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

• Blinksale
• Zendesk

هناك طريقة طريفة لإخفاء icons – المستعملة في تطبيقاتك – من أعين الفضوليين، علماً أنه يمكن الوصول إليها من ملف CSS، فعند الضغط بالزر الأيمن للفأرة لحفظ الإيقونة ستظهر صورة بيضاء فارغة.

اضغط هنا للتجربة:

قم بوضع صورة صغيرة بحجم الإيقونات الأصلية:

<img src="spacer.gif" class="icon" alt="" />

واستخدم الكلاس icon لاظهار الصورة الأصلية:

img.icon {
	background: url(folder.png) no-repeat 0 0
}

يمكنك جمع كل الإيقونات في صورة واحدة واستعمال background-position سيكون أفضل بالتأكيد .