إليك طريقة سريعة وبسيطة، لإضافة 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 سيكون أفضل بالتأكيد .

إن كنت تبرمج تطبيقات للويب، وتحتاج لعرض بعض البيانات على هيئة Grid، فهذا الدرس يعطيك طريقة سهلة وسريعة لعرض بيانات عضوية على شكل جدول .. كالمستعملة في موقع Youtube

الطريقة بسيطة وأكثر احترافية من الطريقة المستعملة في Youtube حيث استعمل الموقع وسوم div بكثرة.

استعمال Bulleted List:

<h2></h2>
<ul>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
</ul>

طبع البيانات:

<h2>Profile</h2>
<ul>
	<li>name: <span>cssbit</span></li>
	<li>channel views: <span>158</span></li>
	<li>age: <span>54</span></li>
	<li>joined: <span>february 12, 2007</span></li>
	<li>last sign in: <span>1 week ago</span></li>
	<li>videos watched <span>1,505</span></li>
	<li>subscribers: <span>5</span></li>
	<li>country: <span>morocco</span></li>
</ul>

ما ستضيفه الان في CSS:

ul {
	position: relative;
}
ul li {
	border-bottom:1px dotted #ccc
}
ul li span {
	position: absolute;
	right:05px
}

من المهم جدا أن تعطي الخاصية: relative للقائمة UL كي تستطيع تحريك القائمة او تغيير العرض والمكان وستبقى البيانات دائما في صندوق UL كذلك هذا مهم كي يتم احتساب المسافة في Right من يمين UL وليس من يمين الصفحة Body

الان استعمل مهارتك في CSS لتنسيق البيانات بخط جميل ولون مناسب ..

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

مثال مباشر

سنتعمل Class داخل Footer ونعطيه بعض الخصائص، وداخل هذا Class سنستعمل Heading (لك حرية الاختيار) والقوائم Bulleted List

<div id="footer">
	<div class="section">
	  <h2>title</h2>
	  <ul>
		 <li>link</li>
	  </ul>
	</div>
</div>

#footer .section {
	float: left;
	width:200px;
	padding:1em;
	margin: 10px;
}

كرر Class section في صفحة HTML حسب ما لديك من روابط، بعد ذلك أضف خلفية وألوان وخصائص حسب رغبتك.

ul {
	margin: 10px 0 0 0
}
ul li {
	text-transform: capitalize;
	display: block;
	padding:.2em;
	border-bottom:1px solid #BCD19E
}
ul li a {
	color:#BCD19E;
}
ul li a:hover {
	color:#fff
}

ولا تنس إضافة بعض Fix ل IE6:

/* IE Hacks */
*html #footer {
	height:1%;
}

يمكنك تصميم نماذج بريدية أنيقة (login, dashboard ..) في أقل من 5 دقائق.
مثال مباشر على الصفحة
نفس المثال ب HTML5

لديك صفحة دخول إلى لوحة تحكم في مشروعك مثلا، افتح المحرر وأنشئ صفحتين:

login.html
css/reset.css
css/login.css

استعمل ملف reset لتصفير الاعدادات الافتراضية ل Elements وأنصح باستعماله.

اختر لونا مختلفا للخلفية Body وليكن بدرجة خفيفة:

body {
	background:#f2f5ec;
}

ضع النموذج البريدي في وسط الصفحة:

#page {
	width:385px;
	margin:60px auto
}

<div id="page">
</div>

غير لون الخلفية الخاص بالنموذج الى الأبيض:

form {
	background:#fff;
}

أضف خلفية مختلفة للحقول Input سواء باستعمال لون ب CSS أو على شكل صورة:

form input {
	background:url(../images/input.png) repeat-x 0 0;
	border:1px solid #ddd;
}

وخلفية أو لون مختلف عند وضع مؤشر الفأرة Focus:

form input:focus {
	background:url(../images/input-focus.png) repeat-x 0 0;
	border:1px solid #bbddfc
}

وأخيرا، استعمل Class لتغير خصائص زر الأرسال Submit:

<input type="submit" value="login" class="login" />

form input.login:hover {
	background:#666
}

يمكنك الان البدأ بتصميم واجهة UI للوحة التحكم الخاصة بتطبيقك.

يمكن تصميم النماذج البريدية بأي طريقة يرغب بها المطور، وما دام هناك مجال للابتكار اللذي يصب في مصلحة الزائر، شرط أن يحضى هذا الأخير بتجربة جيدة في الموقع، وهذا يقدونا للحديث عن user experience أو اختصارا UX، الذي هو مهنة قائمة بذاتها لا تختلف عن Web designer أو Web Developer وأن كان من الأجدر بمطور الويب الإلمام ب UX

يجب أن تقدم تجربة فريدة وممتعة للزائر وهو يتصفح وينتقل بين صفحات الموقع، وأن يشعر بأن الموقع يهتم به كإنسان وليس ك Robot، وسأعود لاحقا للحديث عن هذا الموضوع من وجهة نظري.

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

تجربة النموذج البريدي:

اضغط هنا لرؤية المثال

الطريقة:

بعد أن نضع النصوص والحقول في نفس السطر أو في فقرة، نضيف بعض الخصائص على Input

form input {
	border:0;
	border-bottom:1px dotted #666;
	background: none;
	color:#C13E1F
}

من المهم أن نضيف هذا السطر في البداية، كي لا يظهر border على كامل input

form input {
	border:0;
}

زر الأرسال كي يظهر بشكل مختلف نضيف له Class وخصائص مختلفة:

<input type="submit" value="sign up" class="submit" />

form input.submit {
	background: #467B2C;
	color:#fff;
	border:none;
	padding:.5em
}

يمكن إنتقاء عبارات تضعها بدل your username .. والعبارات العادية، طالما أنك صممت النموذج على شكل فقرة أو رسالة ان صح التعبير، يمكن أيضا تغيير لون وشكل الحقول لتكون أكثر وضوحا ..

IE7 ملف javascript لترقيع المشاكل التي تظهر في متصفحات IE عند استعمال css و xhtml، كما يوجد ملف IE8 لبعض الخصائص المتقدمة الموجودة في css والتي لا تظهر في IE7 فما تحت

تمة عدة طرق لحل مشكلة عدم ظهور صور PNG بشكل شفاف في متصفحات IE6 فما تحت، من بينها استعمال ملف IE7، و بعض المواقع ك woothemes تستعمله في أعمالها الجميلة

يمكن تحميل الملف ووضعه في مجلد JS ضمن ملفات مشروعك، كما يمكن استدراجه مباشرة من مكتبة google code

<!--[if lt IE 7]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
 type="text/javascript"></script>
< ![endif]-->

الان اي صورة او ايقونة شفافة بصيغة PNG يجب أن تضيف لها -trans كالتالي:
logo-trans.png
edit-trans.png
..

وستظهر بشكل شفاف في متصفح IE6 (والأقل)

تجربة بدون ملف ie7
تجربة بملف ie 7

جرب المثالين على متصفح IE6

ملاحظة مهمة جدا، بعد استعمال ملف IE7 قد تظهر بعض الصور أو الإيقونات بشكل صغير في IE6 لذا من الأفضل إضافة width و height

<img src="10-trans.png" alt="" width="48" height="48" />

من المؤسف أننا كمطورين، مضطرين للمرور بكل هذا التعب والازعاج، فقط لدعم شفافية PNG في متصفحات IE